Jump to content



Photo

Adding image problem

Answered Go to the full post

  • Please log in to reply
5 replies to this topic

#1 wivelden

wivelden

    Neowinian

  • Joined: 04-December 02
  • Location: United Kingdom

Posted 17 February 2014 - 18:26

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://thelittlecoff...om/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&deg;2 Gift Box</a></div></div></div>

I hope that someone can help. Thanks



Best Answer +virtorio , 18 February 2014 - 10:23

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:

Go to the full post



#2 OP wivelden

wivelden

    Neowinian

  • Joined: 04-December 02
  • Location: United Kingdom

Posted 18 February 2014 - 09:25

Anyone help please?



#3 +i11usive

i11usive

    Neowinian Senior

  • Joined: 28-November 06
  • OS: Windows 8.1
  • Phone: Galaxy S5

Posted 18 February 2014 - 09:35

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

 

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



#4 +virtorio

virtorio

    4089 III

  • Tech Issues Solved: 11
  • Joined: 28-April 03
  • Location: New Zealand
  • OS: OSX 10.9, Windows 8.1
  • Phone: Samsung Galaxy SIII

Posted 18 February 2014 - 10:23   Best Answer

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:

Attached Images

  • coffee.jpg


#5 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 18 February 2014 - 12:00

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.



#6 OP wivelden

wivelden

    Neowinian

  • Joined: 04-December 02
  • Location: United Kingdom

Posted 19 February 2014 - 15:01

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.