I'm trying to make my background image responsive in the twenty fifteen theme, especially for mobile i.e. 360px by 640px. I've tried tons of CSS, but no dice. The div is body.custom-background I believe.
Here is the test site: test.justinhawleydesign.com
Thanks
Justin
You'll need max-width: 100% and position your background center center fixed.
It works best to put this on the html element as it's more reliably the full height of the browser. That said, body seems to be working fine for you here when I revised in the inspector.
body.custom-background {
background: url('http://test.justinhawleydesign.com/wp-content/uploads/2015/09/camera-green22.png') no-repeat center center fixed;
max-width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
I have got a website that looks like this:
<div id="top" class="header-container2">...</div>
<div class="main-container">...</div>
The first div is the header section and the second the main content area with products and so on. Now I want a full background image and I tried like this:
html {
background: url(someimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Did not work, no image shown. On the body element it does not work either. Only when I assign the exact same CSS to the main-container div, it works, but the image is not shown as background on the div with id top of course. So, how could I assign the background image without having to think about the structure of the site? Possible at all?
I double checked the path of the image, so thats not the problem.
Set html height to 100vh or 100%
html {
background: url(someimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
These are the default CSS which we set on top of, while writing custom styles like body,html to 100%
And also its good to provide minimal HTML and CSS of your working code.
first, make sure your two divs don't have a background property, otherwise you can simply englobe them in a containing div and assign the background to it.
You can also use the body, I think. Do you use any CSS resets?
body {
background: url(https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div {background-color:rgba(255,255,255,0.7);margin-bottom:10px;padding:10px;}
<div id="top" class="header-container2">header-container2</div>
<div class="main-container">main-container</div>
To make the page cover the window height, you might try:
html,
body {
height: 100%;
}
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.
I'm trying to get a background image to fill the screen on a container-fluid div and it is not working. I've done quite a bit of research, but here's the problem: the website I'm working on is on a platform on which I have absolutely no ability to edit the html. This is the website for my HOA (Homeowner's Association), and they use a god-awful platform - HOA Express. The only customization ability I have is a "Custom CSS" box on the website settings page. The website's url is.
I had a full-screen background image on the site previously, but this week they updated their whole system from something circa 2002 to I assume a version of bootstrap (with which I am not very well-versed), and in doing so they wiped out all existing custom css, so I have to go in and redo everything.
Any ideas on what I might try? Is this even possible?
You are missing background-size: cover from my example. However this will "zoom" the image, and I don't think that is what you want. I suppose you want the image to fill the viewport, and stay there. To achieve this you need to set your background to cover "100%" and be fixed.
So basically you add this.
.container-fluid {
background-size: 100% 100%;
background-attachment: fixed;
}
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
Add background-size and width to the image
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I have a not so unusuall problem but either my google skills suck or I don't know how to ask and find solutions to my problem.
I am using bootstrap3 to build my website which looks fine on IE 8 except for a banner part.
The outer .row div is 100% with a background image covering the full with. Inside the div, I have a .container div has centered content leaving some space on both ends.
In all browsers except IE8, this design works fine but on IE, the background image only goes as far as the .container leaving white space on both edges.
Here is my css
.heading
{
background: url(../images/inner-heading-bg.png) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
min-width: 50px;
min-width: 100%;
}
Please see attached image for IE
IE8 doesn't support background-size: cover; by itself, it needs a little push in the back.
You can use a polyfill like: https://github.com/louisremi/background-size-polyfill to get it working in IE8.
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;
}