Right now my wordpress site is set up so the images scale when the screen size changes. I was hoping that, instead, the image can remain at a specific size in the center of the screen and become cropped equally on the left and right when the screen size changes.
I have tried max-width:none but that doesn't keep and crop the image in the center of the page.
Site: Zxndesignco.com
The image in question is the only image on the home page. I only know CSS so I was hoping there is a CSS solution.
Example of what i'm taking about: https://gatewaydemo.wordpress.com/
Thanks for the help.
The general idea is to not use an image, and make that image the background-image of that hero section instead. So delete the img tag and add something like this CSS to .sow-image-container height: 400px; background: url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg) center top; background-size: cover
body{
background-repeat:no-repeat;
background-position:center center fixed;
background-image:url(https://zxndesignco.com/wp-content/uploads/2016/12/HomeImg.jpg);
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
.white{
font-size: 24px;
color: #fff;
}
<div>
<p class="white">Here are some words</p>
</div>
Usually in the body or in a div. I like this group because it covers all the browser bases.
Related
I know there are already a zillion questions and answers concerning CSS background-image, but I cannot find the proper answer, unfortunately; above that, some of the answers are quite old...
My CSS:
#showcase {
min-height: 500px;
background: url('../img/P1220784--grijs-1920.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
text-align: center;
color: #a21a21;
background-color: rgba(255, 255, 255, .9);
font-weight: 600;
}
Almost perfect for me, except that, on resizing, the image gets cut off on the sides. The image is a photo of people, so I want all of them shown!
(I should have added that the image I use is 1920 * 798 pixels)
Can this be done?
Thank you,
Ad
Try this
background-size: contain;
You can use background-size: auto 100%;
Hi You can try live all possible properties attributes of "background-size" in browser.
Background-size : 100% -Make Image cover whole div but Image will Stretched.
Background-size : coved - Make Image cover whole div with responsive cutoff functionality.
Background-size: auto/contain - Set Image responsibly according to height width on div but not cover whole.
Actually, I have chosen to follow #Dejan.S' suggestion. The img as an HTML tag, and not use it as background. Makes my life a lot easier!
I'd like to have my banner fill up the top of the website completely, how do I do that? There are some gaps as shown in the photo. Here is my css:
<body>
<div id="headerbanner"></div>
<div class="container">
</div>
</body>
body{
background-image: url("../IMAGES/mountain1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#headerbanner{
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
}
It's hard to pinpoint the exact issue as you haven't provided a great detail of detail, context or code, but I believe issue is that your background image doesn't cover the container.
Try the following CSS rule
background-size: cover;
Your new CSS would be:
#headerbanner {
height: 70px;
background-color:black;
background-attachment: fixed;
background-position: center top;
background-size: cover;
}
This should stretch the background image to fill the container, whilst retaining aspect ratio.
Try to not make the banner a background, that doesnt make sense.
instead use a fixed position and manually set it to 0px top, 0px right.
Consult this :
https://www.w3schools.com/cssref/pr_class_position.asp
NEXT THING TO CONSIDER:
Once you or your client has accessed the website, programmatically set the position, width and height depending on viewport of the client's browser. This can be accomplished with javascript, using the window.onload function.
I have a map image which I would like to use as the background for my website. I would like it to cover the whole background (no white space, no scroll bars - most of the time, more on that later). However, there is a section of the map which I would like to never be cropped as I plan to overlay it with other information.
I have tried the following css:
html {
background: url('../images/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
}
Can be seen in this fiddle. The section I'd like to keep is the large yellowish section to the right of the image.
This works quite well for keeping the section of my background image in the frame most of the time but it still gets cut out when the window is resized to very short or very wide. In this situation I would like scroll bars to be introduced so that the whole 'focal point' can still be seen.
I know this is pretty niche but I was wondering if anyone can see a neat way of doing this?
If you know the size of you background pic, set min-witdh and min-height with that.
html{
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') ;
min-width:1000px;
min-height:300px;
}
Updated Fiddle
Place the background image in a container, and give it a minimum width and height, with overflow set to auto. So when the size of the browser forces the container to be smaller than you'd like, scroll bars appear allowing the user to pan the map.
<div class="map"></div>
and your CSS:
div.map {
background: url('http://s2.postimg.org/kzwt9n34p/doreyfarmfullbackgroundempty2.png') no-repeat 90% 60% local;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
overflow: auto; <-- this will enable scrollbars on overflow
min-height: 400px; <-- adjust this to taste
min-width: 400px; <-- and this
}
body {
margin: 0;
padding: 0;
}
Update to your fiddle here:
http://jsfiddle.net/xkcsu5st/2/
You could always augment this with a bit of script to control the scroll position of the map, so that the portion you want visible is always in view.
Here's a jQuery library that does it with images instead of background-images:
https://github.com/jonom/jquery-focuspoint
It might not be the best answer in time but it seems to be for now. I'll post another answer if I have one for I think there might be a better way which I'm researching at the moment :)!
I have a fairly complex webpage and am looking to have a image in the background that is seen through all out all the div layers. Please take a look at http://va.in-design.com for the code. No matter what I try, I am able to only get some of the menu to show. Some settings make it show when the menu on the page is accessed (hovered over). Can someone give me a pointer on the best way to do this. Also, is there anything available out there that would allow that image to be 100% at load and then fade down to 15%?
There is CSS opacity and CSS transitions, but for this I am going to use jquery.
Adjust your html{} selector to show the background like this
html {
height: 100%;
margin: 0;
width: 100%;
background-image: url(/images/logos/v-alexander-logo1-04-transpart-web.gif)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I am not sure what you mean the menu doesn't show I saw the menu over the background image for sure. If you are still having this issue I would recommend using the z-index as one of your css rules for your menu ul#sdt_menu or wrapping that in a div id also and adjusting that parent div's z-index.
the jquery to do the opacity fade would be this http://jsfiddle.net/naeluh/XYB3u/
add this div to all the pages you want the background.
<div id="background"></div>
add this css rule to your style.css file and take away your html{}
#background{
height: 100%;
position:absolute;
top:0;
left:0;
width: 100%;
background-image: url(http://va.in-design.com/images/logos/v-alexander-logo1-04-transpart-web.gif);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:-1;
}
add this in the head of the pages you want it to fade out
<script type='text/javascript'>
$(window).load(function(){
$('#background').fadeOut(9000);
});
</script>
I am trying to achieve something like this with CSS:
I'd like to keep the body background image fixed on fullscreen, this is sort of done by the following code:
body
{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}
Now I can verify the window is indeed filled up with that image, at least this works on my Firefox 3.6
However, it screwed up when I tried to zoom in/out (ctrl+-/+), the image just is stretched/shrinked as the page zooms.
Is there a better way of doing this purely with CSS? I didn't find a good property for the background-image.
Or should I start thinking about jQuery to manipulate the width and height on the fly? They were both set to 100% so I reckon that should work "as always" :(
Thanks for any suggestion in advance!
there is another technique
use
background-size:cover
That is it
full set of css is
body {
background: url('images/body-bg.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Latest browsers support the default property.
I've used these techniques before and they both work well. If you read the pros/cons of each you can decide which is right for your site.
Alternatively you could use the full size background image jQuery plugin if you want to get away from the bugs in the above.
You can do quite a lot with plain css...the css property background-size can be set to a number of things as well as just cover as Ranjith pointed out.
The background-size: cover setting scales the image to cover the entire screen but may mean that some of the image is off screen if the aspect ratio of the screen and image are different.
A good alternative is background-size: contain which resizes the background image to fit the smaller of width and height, ensuring that the whole image is visible but may lead to letterboxing if the aspect ratios are different.
For example:
body {
background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
background-size: contain;
}
The other options that I find less useful are:
background-size: length <widthpx> <heightpx> which sets the absolute size of the background image.
background-size: percentage <width> <height> background image is a percentage of the window size.
(see w3schools.com's page)
Add this in your css file:
.custom_class
{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and then, in your .html (or .php) file call this class like that:
<div class="custom_class">
...
</div>
Here is the simple code for full page background image when zooming
you just apply the width:100% in style/css thats it
position:absolute; width:100%;
Use Directly like this
.bg-div{
background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}
or call CSS separately like
.bg-div{
background-image: url(../img/beach.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}