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/
Related
I have an issue where I want to have to divs that act as a background. they basically wrap the entire page. both have the same gradient set as their background-image. the problem is that on div displays the gradient perfectly fine, but the other is just white.
html:
<div class="bg bg-base">
<div id="bg-animation" class="bg bg-animation">
<div class="layer-content">
<!--content here-->
</div>
</div>
</div>
CSS:
.bg {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
position: absolute;
}
.bg-base {
background-image: linear-gradient(to left bottom, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}
.bg-animation {
background-image: linear-gradient(to right top, #5533ff, #008dff, #00bdff, #00e0dd, #a4fbc9);
}
.layer-content {
width: 100%;
position: relative;
}
I'm doing some opacity animations with the top gradient, that's why I need 2 of them on top of each other. but if say, I set the opacity of the top gradient to 0, the bottom one isn't there. if I add a height: 5000px; to the bg-base, it does show up.
Kill the absolute positioning:
https://jsfiddle.net/cathead/1nbjdp05/4/
.bg {
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
xposition: absolute;
width: 100%;
}
I have image (width = 1920px) and I need to show the whole image at Full HD resolution (width=1920px) the middle of the image at smaller resolutions (see screenshot):
screenshot
Could you help me add CSS style to display center of image at smaller resoultions?
//html:
<body>
<div class="header">
</div>
</body>
//css:
html, body {
margin: 0;
padding: 0;
}
.header{
background-image: url(Header.png);
width: 100%;
height: 292px;
}
Try this one:
background-image: url('path/to/img.png');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
And optional:
background-position: center;
Use background-position: center; to center the image, so when the width is less then the image size, the center will be remain visible.
.header {
height: 1080px;
background: url(http://www.cats.club/wp-content/uploads/2017/03/image_header_option.jpg);
background-size: cover;
background-position: center;
}
<header class="header"></header>
Just use background-position: center; and background-size: cover;.
You can find documentation on these attributes and property values here.
See the snippet. The original image is of three pirate skulls. Here you can see it is centered on the parent div.
.header {
width: 200px;
height: 200px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Flag_of_Christopher_Condent.svg/1000px-Flag_of_Christopher_Condent.svg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="header">
</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 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
That was a mouthful....
So, I'm stuck with an image from Marketing that has a picture of some people, it has the top left and right corners rounded AND it has a gradient transition from the bottom to the top (dark blue to a lighter shade).
So what I have done is cropped the LEFT (180px x 10px) and RIGHT (180px x 10px) rounded corners and made separate images out of them, then cropped another image that only contains the gradient blue (180px x 10px without the people in it), and what is left is the image with the people in it (180px x 461px). So know I have 4 images total.
Finally, the question:
How do I arrange the filler div so that it expand and contracts on re-sizing of the browser (fills the space between the left rounded corner and the image of the people?
Thank you,
Stephen
<style>
#left {
height:180px;
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
width: 10px;
background-image: url("#Url.Content("~/Content/images/login/left.png")");
}
#filler {
height:180px;
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
width: 50px;
background-image: url("#Url.Content("~/Content/images/login/filler.png")");
}
#image {
height:180px;
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
width: 461px;
background-image: url("#Url.Content("~/Content/images/login/image.png")");
}
#right {
height:180px;
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
width: 10px;
background-image: url("#Url.Content("~/Content/images/login/right.png")");
}
</style>
<div class="row-fluid">
<div id="left" class="pull-left"></div>
<div id="filler" class="pull-left"></div>
<div id="right" class="pull-right"></div>
<div id="image" class="pull-right"></div>
</div>
<div class="row-fluid">
<img src="http://mydomain.com/pic.jpg" />
</div>
.row-fluid{
background: #fff;
}
.row-fluid img{
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}
and this is the demo: http://jsfiddle.net/Ashkanvb/rsPp2/
I agree with the border-radius answer. But, if it turns out (for whatever reason) that you must use the images then there's a solution with some tweaked HTML and CSS here:
http://jsbin.com/AwUWabI/7/edit