Pootis Spencer Posted February 17, 2014 Share Posted February 17, 2014 Hi, I have been asked how to add a images to some boxes in a page of a website that was not built by me. I am having trouble on how to alter the html code to add the images so came here for help. I'm probably missing the obvious as usual. The page is http://thelittlecoffeebagco.com/procorp.html As you can see on this page you have a grid of boxes that have a hover effect and also a link to the product. This page is unfinished as I need to add the product images to the boxes keeping the name and hover effect. The line of code for the boxes is: <div class="brands"><div class="border"><div class="logo"><a href="productcorp2.html" class="dynlink">Blend N°2 Gift Box</a></div></div></div> I hope that someone can help. Thanks Link to comment Share on other sites More sharing options...
0 +virtorio MVC Posted February 18, 2014 MVC Share Posted February 18, 2014 HTML: <div class="brands"> <div class="border blend-n1-gift-box"> <div class="logo"> <a href="productcorp1.html" class="dynlink">Blend N?1 Gift Box</a> </div> </div> </div> CSS: .blend-n1-gift-box { background-image: url(http://www.designandgrace.com/store/images/stories/coffee_beans.jpg); } Sample: Link to comment Share on other sites More sharing options...
0 Pootis Spencer Posted February 18, 2014 Author Share Posted February 18, 2014 Anyone help please? Link to comment Share on other sites More sharing options...
0 i11usive Posted February 18, 2014 Share Posted February 18, 2014 You can add a background using CSS - .logo { background-image:(/images/mybackground); } You may have to add additional class names to each div. Link to comment Share on other sites More sharing options...
0 the better twin Posted February 18, 2014 Share Posted February 18, 2014 I wouldn't advise using background images for product shots. You should be using inline <img> tags so you can include alt tags, and your images will be seen by screen readers / search engines. Link to comment Share on other sites More sharing options...
0 Pootis Spencer Posted February 19, 2014 Author Share Posted February 19, 2014 HTML: <div class="brands"> <div class="border blend-n1-gift-box"> <div class="logo"> <a href="productcorp1.html" class="dynlink">Blend N?1 Gift Box</a> </div> </div> </div> CSS: .blend-n1-gift-box { background-image: url(http://www.designandgrace.com/store/images/stories/coffee_beans.jpg); } Sample: Thank you. That will do just fine. I wouldn't advise using background images for product shots. You should be using inline <img> tags so you can include alt tags, and your images will be seen by screen readers / search engines. Yes I understand that but I just needed a very quick fix just to get the images on there. I'm sure they will get it coded correctly at a later date. Link to comment Share on other sites More sharing options...
Question
Pootis Spencer
Hi,
I have been asked how to add a images to some boxes in a page of a website that was not built by me.
I am having trouble on how to alter the html code to add the images so came here for help.
I'm probably missing the obvious as usual.
The page is http://thelittlecoffeebagco.com/procorp.html
As you can see on this page you have a grid of boxes that have a hover effect and also a link to the product.
This page is unfinished as I need to add the product images to the boxes keeping the name and hover effect.
The line of code for the boxes is:
I hope that someone can help. Thanks
Link to comment
Share on other sites
5 answers to this question
Recommended Posts