CODEWITHSUNDEEP
htmlcssimage
user3105607
user3105607

Reputation: 369

Repeat background image as header

Trying to get my image to repeat on the x-axis along the top of my webpage. The image appears but doesn't repeat.

HTML:

<div id='head'><img src='img/header.jpg'></div>

CSS:

 #head img {
    background-repeat: repeat-x;
    width: 100px;
    height: 20px;
    position: absolute;
 }

Thanks.

Upvotes: 0

Views: 18765

Answers (5)

Ankit Agrawal
Ankit Agrawal

Reputation: 2454

if you want to repeat your image , apply image in div's background using css HTML : 

<div class="head">
&nbsp; &nbsp;
</div>

CSS:

<style>
.head{
 background:url("/images/pulpit.jpg") ;
 width: 100px;
 height: 100px;
 position:absolute;
 background-repeat:repeat-x;

 }
</style>

Upvotes: 0

Gourav
Gourav

Reputation: 1774

Here is the Fiddle.

HTML:

 <div id='head'></div>

CSS:

#head {
    background-repeat: repeat-x;
    width: 100px;
    height: 200px;
    position: absolute;
    background-image:url("http://t2.gstatic.com/images?q=tbn:ANd9GcRueEELruucpzBbsfBcn_JPGG338iDtWWoJPYo3o9AvbKty37edzg");
}

I hope you wanted to achieve this.

Upvotes: 0

serakfalcon
serakfalcon

Reputation: 3531

This is what your code is doing:

The img tag is inserting a single image (header.jpg) into the code. Your css styling is telling the code to repeat any css-assigned background image along the x-axis, inside the space provided by the img tag.

All that to say: assign the style directly to the head id and add header.jpg as a background-image to the style, and it'll work fine. Try the below as an example:

<!DOCTYPE html>
<html>
<head>
<style>
.kitty 
{
background-image: url('http://images5.fanpop.com/image/photos/26000000/Nyan-Cat-Gif-   nyan-cat-26044255-500-375.gif');
height:400px;
background-repeat: repeat-x;
background-color:#cccccc;
}
</style>
</head>

<body>
<h1 class="kitty">Hello World!</h1>
</body>

</html>

Upvotes: 0

Moduo
Moduo

Reputation: 623

This is because you've used the <img> tags to put an image on your webpage. But what you wantto do is set the background like so:

CSS:

#head {
    background-image:url('img/header.jpg');
    background-repeat: repeat-x;
    width: 100%;
    height: 20px;
    position: absolute;
}

HTML:

<div id='head'></div>

Upvotes: 1

FoW
FoW

Reputation: 125

Your html is displaying an image within a div.

If you want to have your image as a background you need to set it in the css file like :

#head {
    background-image:url('img/header.jpg');
    background-repeat: repeat-x;
    width: 100%;
    height: 20px;
    position: absolute;
}

and then remove the img balise from your html code :

<div id='head'>&nbsp;</div>

  stands for non-breakable space to be sure you have a content in your balise.

FoW

EDIT: Tom was faster than me

EDIT: made css work :)

Upvotes: 0

Related Questions