To create a background image in a div, you can easily write
<style type="text/css">
.bgimg {
background-image: url('../images/divbg.png');
}
</style>
...
<div class="bgimg">
div with background
</div>
I would like to do this without a seperate style sheet. It might look something like
<div class="bgimg" background-image="url('../images/divbg.png')">
div with background
</div>
However, when I try this, it doesn't work. Is setting a background image in a div without separate CSS possible?
You need to set background-image in style tag. Also you have to set width & height for properly working.
<div class="bgimg" style="background-image:url(https://dummyimage.com/200x200/000/fff&text=Background+Image); width: 200px; height: 200px;"></div>
You should use the style element:
<div class="bgimg" style="background-image: url('../images/divbg.png')"></div>
There are two methods of doing this and you can use other of the two:
<div class="bgimg" style="background-image:url('../images/divbg.png');">
</div>
or you can use
<div class="bgimg" style="background:url('../images/divbg.png');">
</div>
To see the background don't forget to put in content to your div.
Run the below code to see it work:
.bgimg{height:328px; width:328px;}
<div class="bgimg" style="background-image:url('https://www.gravatar.com/avatar/89aa49add7f84c840f2d011857353431?s=328&d=identicon&r=PG&f=1);">
</div>
<br/ ><br/ ><br/ ><br/ >
<div class="bgimg" style="background:url('https://www.gravatar.com/avatar/89aa49add7f84c840f2d011857353431?s=328&d=identicon&r=PG&f=1');">
</div>
Use inline style using style attribute inside of your div element. Like this:
<div style="background-image: url('../images/divbg.png')"></div>
Note that you may have to remove apostrophes in the url() to make it work in Chrome.
You can set the background image with inline CSS and eliminate the need of a seperate css block or file:
<div style="background-image: url('../images/divbg.png')"></div>
If you are using jQuery you can do this on document.ready:
Still.. using CSS is recomended
Snippet:
$(document).ready(function() {
$('.bgimg[background-image]').each(function() {
$(this).css('background-image', $(this).attr('background-image'));
})
})
.bgimg {
min-height: 100px;
background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?0')">
div with background
</div>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?1')">
div with background
</div>
<div class="bgimg" background-image="url('http://lorempixel.com/400/100/?2')">
div with background
</div>
Related
I have this structure:
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
I need to use background-image on container, but it does not have any content. Only header, sidebar, and main have content. How I can do it without position: absolute or specifying height in pixels?
min-height is useful, but I want to try dynamic size.
As others had noticed, it doesn't make much sense to have a container without content... but if you really wanna do this, you could use a padding on your #container to give it the size of the image:
#container {
background-image: url(https://lorempixel.com/g/800/600/);
background-size: cover;
padding-bottom: calc(100% * (600/800));
}
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
This way, the container will have the same aspect ratio as your background image.
JSFiddle
Basically you can't show a background on a container that does not have content or specific height/width because it makes no sense.
A background means the "backside of the content", if the content don't have a size where you put the background? :)
If you have a rough idea of how much content the container is going to contain, you don't need to specify an exact height for it. Instead, consider using the min-height attribute like this:
#container {
background-color: black;
min-height: 50px;
}
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
If you're setting a background, it means that it will be displayed behind all of the content within the area that the content is in. For this reason, a minimum height must be specified for it to display the background without requiring any fixed, unchangeable height and without any content in the container.
Try it:-
background: url("image.png") no-repeat 105% 105%;
try this:
#container {
min-height: 200px;
background-image: url('your-image.png');
}
So I'm creating a parallax page and i did:
<section class="parallax">
<div class="parallax-inner">
<h2>Space</h2>
</div>
On the css then I put a background and some padding. But here's the problem: I created an h1:
<section class="parallaxtop">
<div class="parallax-inner-2">
<h1>Space</h1>
</div>
And I set the background bbut it doesn't appear!! I'm 100% sure that i put the right file and the right directory! And I did the same with the h2 div! What should i do?
.parallaxtop{
background: url("img/pattern.jpg");
}
there's a typo on .parallaxtop
you used color('') instead of url('')
should be:
.parallaxtop{
background: url("img/money.jpg");
}
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
Is it possible to have a background image not display in a certain element?-
Example -
If I have 3 divs inside of div that has a background image all inside a <body> tag that has a background image. Is there some way to show the <body> background image (BodyBackground.jpg) instead of the <div> background image (DivBackground.jpg) in the center div?
<body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
<div style="background-image:url('/Content/Images/DivBackground.jpg')">
<div style="height:100px;width:200px"></div>
<div style="height:100px;width:200px"> SHOW BodyBackground.jpg IMAGE HERE </div>
<div style="height:100px;width:200px"></div>
</div>
</body>
You can make it look like it using fixed position.
HTML:
<body style="background:url('/Content/Images/BodyBackground.jpg') repeat-y;">
<div style="background-image:url('/Content/Images/DivBackground.jpg')">
<div style="height:100px;width:200px"></div>
<div style="height:100px;width:200px;background:url('/Content/Images/BodyBackground.jpg') fixed;">
SHOW BodyBackground.jpg IMAGE HERE
</div>
<div style="height:100px;width:200px"></div>
</div>
</body>
Because the background position is set to fixed its position is global to the whole page and not the div itself. Even if you change the position of the elements in the page it'll still look like that area is transparent.
Try this
<body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
<div style="background-image:url('/Content/Images/DivBackground.jpg')">
<div style="height:100px;width:200px"></div>
<div style="height:100px;width:200px;background-image:url('/Content/Images/BodyBackground.jpg')!important;"> SHOW BodyBackground.jpg IMAGE HERE </div>
<div style="height:100px;width:200px"></div>
</div>
</body>
You could create a CSS class that defines the background image. And then use the CSS class accordingly?
Eg.
.body-bg{
Background-image:url(...);
}
.div-bg{
Background-image:url(...);
}
body class="body-bg">
div class="div-bg></div>
div class="body-bg></div>
div class="div-bg></div>
/body>
I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.