CODEWITHSUNDEEP
htmlcssweb
krtek
krtek

Reputation: 265

HTML div with a background

I'm making a website (Although I know nothing about HTML & Photoshop). Its quite a challenge for me and I'm pretty happy with what I got so far.

Now I want to make boxes / floating squares on the site.

So I wanted to do this by using a the div but I have no clue how :@

<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX? 
</div>

I have this in my style.css:

#div1 {Background: url("bg_content_middle.png");}

bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom. And thats not even working :(

Please help me.

Upvotes: 0

Views: 99

Answers (5)

Iterate
Iterate

Reputation: 158

First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.

If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:

background-repeat: repeat-y;

And set a width equivalent to the image width.

Upvotes: 0

alexakarpov
alexakarpov

Reputation: 1920

well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:

<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>

Upvotes: 0

Jason Kaczmarsky
Jason Kaczmarsky

Reputation: 1686

1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.

Upvotes: 0

Tak
Tak

Reputation: 11732

You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.

In this case you could go for a pure CSS solution:

<div id="div1">HELLO I AM A BOX ^_^</div>

#div1 {
 background-color: #900;
 border: #f33 1px solid;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
}

Please don't number your divs though, call them something relevant like <div id="content">.

Hope that helps

Upvotes: 2

tam
tam

Reputation: 1583

You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags

Upvotes: -1

Related Questions