So i have a website i'am developing and i need to have an image as a background inside of a <div>
tag in html, here is the current code i have so far:
<div id="menu" style="background-color:ffd700;float:left;height:600px;width:250;">
So i have a website i'am developing and i need to have an image as a background inside of a <div>
tag in html, here is the current code i have so far:
<div id="menu" style="background-color:ffd700;float:left;height:600px;width:250;">
<div id="menu" style="background: #FFD700 url('myImage.jpg');">
The hex color value will be used if the browser the viewer is using an image blocker, unable to view the image, or if the image does not exist. The URL is the path to the image (can either be a relative or absolute path.
More info: CSS Basics: Background Properties
P.S. Even though this code block DOES in fact work, it is poor practice to set inline styles. You should always use an external stylesheet to separate your style from your content.
First of all, it's not very good practice to use inline styles. Since your div tag already has an id, you can apply styles to that id within a stylesheet. The code to do so would look like this:
#menu {
background: url("path_to_your_image") #ffd700;
float: left;
height: 600px;
width: 250px;
}
The part that sets the background image is background: url("path_to_your_image")
the #ffd700
applies the color. However, since the background image is set to repeat by default, you won't see the color unless you specify that the background should not repeat. You can do that by changing the above line to background: url("path_to_your_image") no-repeat #ffd700
.
Of course, if you don't want to use a stylesheet, the same thing applies. You just have to put that line in the style attribute of your HTML tag.