I want to set background-image to a particular container using Pseudo selector (before) . How can I perfectly set background-image to that particular container?
I want to set background-image to any particular container that i want using pseudo selectors
Suppose you have 2 divs as parent and child. You can add a before pseudo-element on the parent div.
.first { text-align:center; position: relative; background-image: url(https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.first:before { position:absolute; top:15px; bottom:15px; left:15px; right:15px; content:''; background-image: url(https://img.freepik.com/free-photo/young-asian-man-with-camera-isolated-white-background-photographer-concept_231208-3767.jpg); background-repeat: no-repeat; background-size: contain; background-position: center; }
.second { height:300px; position:relative; }
<div class="first"><div class="second">Top<br>Caption</div></div>
Thanks
Related
I am trying to have my background image styles in my CSS and the background-image url defined inline. However the CSS styles are getting ignored.. any ideas why?
.myDiv{
position:absolute;
top: 0;
left: 0;
width:100%;
height:400px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="myDiv" style="background-image: url('myimage.jpg')"></div>
I would like to make a background image move as the use scrolls and it is normal to use
background-attachment:fixed;
But the issue is that it is stretching the image and I am not able to position it anymore.
http://jsfiddle.net/5c3b56a7/3/
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
}
.container2{
background-attachment:fixed;
}
You can see the issue better on full screen
http://jsfiddle.net/5c3b56a7/3/embedded/result/
First image is position center top
second one cannot be positioned due to the attachment.
Is there any way to do this?
Unfortunately you cannot use background-attachment: fixed and background-size: cover together.
When background-attachment: fixed determine background image to behave like position: fixed element, background-size: cover forced it to calculate background size relatively to the element itself.
Still you can use JavaScript to calculate background position in window.onscroll() event.
Maybe I misunderstood the problem. Here is my variants as I realized that I want to get a result.
http://jsfiddle.net/p507rg68/light/
HTML
<body class="container2">
<div class="container"></div>
<div class="push"></div>
</body>
CSS
.container{
display: block;
position: relative;
width: 100%;
margin:0 0 10px 0;
padding:0;
overflow:hidden;
background-repeat: no-repeat;
background-position: center center;
background-size:cover;
min-height:350px;
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
}
.container2{
background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
background-size:cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
.push{
margin-bottom:800px;
display: block;
width: 100%;
height:1px;
}
use background-size: to set the image size!
I need to figure out how to only make a section of this div, transparent.
For example, the nav bar is 750 pixels wide. I need to make the first 75 pixels transparent. I know I need to use this code:
opacity: 0|initial|inherit;
However, how do I only apply that code to a section (75px) within the 750 pixel div? This is the ID and classes that I need to target.
#mega_main_menu.primary > .menu_holder > .mmm_fullwidth_container {
background-image: url('http://visualicreative.com/wp-content/uploads/2014/07/Nav- Bar.png');
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
Website: www.visualicreative.com
you could create 2 div elements with the same background but the left one with transparency,
HTML:
<div>
<div class="bar bar-left">Transparent</div>
<div class="bar bar-right">Not Transparent</div>
</div>
CSS:
.bar {
background-image: url('http://visualicreative.com/wp-content/uploads/2014/07/Nav-Bar.png');
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width:100%;
height:40px;
background-size:100%;
}
.bar-left{
opacity: .7;
float:left;
width:75px;
}
.bar-right{
width: 675px;
float:left;
}
here is a demo:
http://jsfiddle.net/BK3HS/
I have a fiddle here.
CSS:
body, html{
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100% 100%;
}
#img {
width:70%;
display:inline-block;
background-color:red;
position:absolute;
bottom:12%;
height:70%;
margin-top:-80px;
margin-left:100px;
}
HTML:
<div id="img"> </div>
Is it possible to make the id tag called #img look like it's fixed to the background?
I am simply trying to make the red block fluid between the blue box (look at the fiddle).
So if you adjust the resolution of the page the red block will not go out of the blue box height-wise, but it will go out of the blue box width-wise.
So basically I want to make sure the red block (#img) stays within the blue box that is on the background image. How can I do this?
Percentages and pixels don't mix that well... Change it all to percentages, for example like this:
#img {
width: 74.1%;
display: inline-block;
background-color: red;
position: absolute;
height: 71.8%;
top: 17%;
left: 13.2%;
}
Fiddle: http://jsfiddle.net/Niffler/r3nW8/43/
Sure you can:
http://jsfiddle.net/r3nW8/44/
body, html {
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#img {
background-color:red;
position:absolute;
margin: 0 auto;
top:18%; /* not 15% cause you have more space on the top area! :) */
left:0;
bottom:0;
right:0;
height:70%;
width:73%; /* note the blue border on your image is not positioned well... */
}
With some more % tweaks you can achieve perfect results: http://jsfiddle.net/r3nW8/45/
I want to use a background image to my section element with width:100% and height:40%.
So i used CSS3 and used this solution:
background-image: url(My_Local_Image);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: center top;
It worked nice!
My problem now is that i want the background-image to be cropped to fit the size i specify. Now image is streched to fit.
Is there ant way that i can achieve this?
FIDDLE
Unfortunately you cannot do something like
background-size: cover 40%;
cause you'll loose the 100%
the solution would be so make a separate image container, and after it an element for your (I suppose) text, setting simply background-size: cover; for the image container,
setting also width: 100%; and height : 40%; for the same.
But what you can do is
LIVE DEMO
<section>
<div class="sectionImage" id="first"></div>
<div class="sectionContent">1</div>
</section>
<section>
<div class="sectionImage" id="second"></div>
<div class="sectionContent">2</div>
</section>
<section>
<div class="sectionImage" id="third"></div>
<div class="sectionContent">3</div>
</section>
section{
background:#444;
position:relative;
margin:10px auto;
height:300px;
width:800px;
color:#fff;
}
.sectionImage{
width: 100%;
height:30%;
background: transparent none no-repeat center center;
background-size: cover;
}
.sectionContent{}
#first{
background-image: url('1.jpg');
}
#second{
background-image: url(2.jpg);
}
#third{
background-image: url(3.jpg);
}
If I understand what you're trying to do, simply remove the 40% from your background-size and the image will fill the div at the 800x300px size.
You must place the background container inside your main container. After that you must provide width and height of main containter and make overflow:hidden.
You can then play with main container's width and height to change crop size. (You can use width:40%; and height:100% too)
Here is JSFidde.
HTML:
<section id="first">
<div id="bg"></div>
</section>
CSS:
#first{
height:300px;
width:200px;
overflow:hidden;
}
#bg{
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
width:800px;
height:300px;
}
Use an inner div to get the crop effect:
Fiddle
CSS
#first{
height:300px;
width:800px;
}
#first div{
width:100%;
height:40%;
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQOhLJod_xPxdgo339zfIJipPzOUZg9BunbT-ftIgDMiu2HLi0o');
background-repeat: no-repeat;
background-size:100%;
background-position: 50% 50%;
}
Use the :before pseudo class
#first:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40%;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: center center;
}
This will give you many CSS options to deal with both bigger/smaller images, stretching/cropping, etc., without messing with the html