Sign in to follow this  

Adding image problem

Recommended Posts

Pootis Spencer    17

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

Share this post


Link to post
Share on other sites
Pootis Spencer    17

Anyone help please?

Share this post


Link to post
Share on other sites
+i11usive    6,086

You can add a background using CSS - .logo { background-image:(/images/mybackground); }

 

You may have to add additional class names to each div.

Share this post


Link to post
Share on other sites
virtorio    2,186

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:

post-27111-0-85449000-1392718973.jpg

Share this post


Link to post
Share on other sites
the better twin    359

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.

Share this post


Link to post
Share on other sites
Pootis Spencer    17

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.