How do I make my background-image show up without using min-height: 200px;? If I remove this line the background-image will not appear. I do not want to use min-height: 200px, as I am trying to make my site responsive the min-height thing will affect the different devices used, I wish to set the height to auto but it's not working.
header
{
background-image:
url(page_home/section_header.jpg),
url(page_home/section_header_bg.jpg);
background-repeat: no-repeat, repeat-x;
background-position: center, left;
min-height:200px;
}
As far as I know - you must set height or min-height so the element will be shown, but if you want a responsive site you can use different heights for different resolutions:
header
{
background-image:
url(page_home/section_header.jpg),
url(page_home/section_header_bg.jpg);
background-repeat: no-repeat, repeat-x;
background-position: center, left;
height:200px;
}
/* #### Mobile Phones Portrait #### */
#media screen and (max-device-width: 480px) and (orientation: portrait){
header
{
height:400px;
}
}
/* #### Mobile Phones Landscape #### */
#media screen and (max-device-width: 640px) and (orientation: landscape){
header
{
height:250px;
}
}
/* #### Mobile Phones Portrait or Landscape #### */
#media screen and (max-device-width: 640px){
header
{
height:100px;
}
}
More about max-device-width:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Also you may want to read about bootstrap - a JS framework for developing responsive sites for web and mobile: http://getbootstrap.com/
CSS3 has a property background-size.
header {
background: url(page_home/section_header.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You still have to give it a height or min-height, I don't think there is an alternative
Related
First of all, I am unable to provide any URL details as I am developing on localhost - for now. However, hopefully, with my clear description below, you may be able to provide a suggestion. :-)
I've been trying to positioning an image in the .header-wrap #header of my Wordpress site using Uplift theme. The code below has worked correctly, but the image goes below the header due to the aspect ratio which means that its height is clearly more than 160px. I have also tried background sizing and background-position - none of these provide the correct outcome.
I am aware that I need to introduce media queries, but I need to first of all get this curved image working on large screens.
I'm needing the image to sit directly under the header logo and to be positioned in the site header template so that it is scalable for all devices but adopts the sticky header so the body scrolls underneath the image.
I've provided two screenshots: first screenshot using the below code, which currently falls below the header area, and the other screenshot displays what it should look like on all screens.
The below code would work if the image wasn't so customised to a particular shape.
So, I need the image to stay fixed, so when a user scrolls up or down, the content of the page should scroll under the image.
.header-wrap #header {
background-image: url(http://localhost/lps/wp-
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
}
preferred layout
The image as it currently stands using code insert
Hi you need media queries to make responsive you image background may be you have to generate different size...
.header-wrap #header {
min-width:100%;
min-height:100%;
height:100%;
width:100%;
position:fixed;
top:0px;
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover; /*this does not produce the outcome required*/
background-position: 0 100px;
-webkit-background-size: 100% 100%; /* Safari */
-khtml-background-size: 100% 100%; /* Konqueror */
-moz-background-size: 100% 100%; /* Firefox */
#media all and (max-width: 1080px) {
.header-wrap #header{ left:-600px;}
}
#media all and (max-width: 980px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 800px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 768px) {
.header-wrap #header{ left:-300px;}
}
#media all and (max-width: 750px) {
.header-wrap #header{ left:-380px;}
}
#media all and (max-width: 640px) {
.header-wrap #header{ left:-280px;}
}
#media all and (max-width: 360px) {
.header-wrap #header{ left:-180px;}
}
#media all and (max-width: 320px) {
.header-wrap #header{ left:-160px;}
}
Now you need to adapt media queries position here for exemple but you have to adapt to the different device here a lot of them...
Using the following code in my CSS stylesheet to target my jumbotron:
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) {
.jumbotron {
padding-top: 500px !important;
padding-bottom: 350px !important;
margin-bottom: 0;
background: url(../images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
The intent is just to increase the top and bottom padding of my jumbotron in mobile displays. But this code does not affect my jumbotron at all. What am I doing wrong?
I have tried using only min-width and only max-width, in addition to using both with the and as in the code above. All three have resulted in no changes.
#screen-sm-min and #screen-sm-max are less vars.
So you have to specify real values if you want to use them in CSS:
#media (min-width: 768px) and (max-width: 991px) {
But if you want to apply a css style only on mobile devices, the correct media query should be:
#media (max-width: 767px) {
I am trying to display a smaller background-image version for mobile devices using media queries. However, the original background image is displayed regular size behind the reduced image.
Here is the css for the image in regular form.
#signup{
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center;
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;
background-color: #464646;
height: 800px;
}
Here are the bootstrap media queries in same css.scss file that I am using.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
#signup{
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center;
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
#signup{
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center;
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;
}
}
/* Small devices (tablets, 768px and up) */
#media only screen and (min-width : 768px) {
#signup{
background-image:linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)),
image-url('zoom1028.jpg');
background-position: center center;
background-repeat: no-repeat;
background-image: fixed;
background-size: cover;
}
}
Lots of websites now have a fullscreen background photo (or even video, such as http://www.paypal.fr).
How to add a fullscreen background photo to a Bootstrap page like this demo:
http://getbootstrap.com/examples/cover/
I tried
<div class="site-wrapper">
<img src="photo.jpg">
but the photo was bad positioned.
There are many ways to do this. You could do it via css:
body {
background: url('photo.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
Use background-size: cover; This will give you the aspect ratio you are looking for
Se DEMO
body{
background: url("http://upload.wikimedia.org/wikipedia/en/b/b2/Brad_Pitt_boxing.jpg") no-repeat 0 0;
background-size:cover;
}
Actually you can add a css rule to body in order to display a picture as a background.
body
{
background-image: url('photo.jpg');
}
In addition to this, if you want background image to cover whole screen, you may add background-size property.
body
{
background-image: url('photo.jpg');
background-size: cover;
}
If you do not want to resize image on narrower screens to keep aspect ratio, you may write conditional rule like the following. Remember to prepare photos differently resized for some screen sizes.
/*for screens larger than 959px */
#media (min-width: 960px) {
body {
background-image: url('photo-xl.jpg');
background-size: cover;
}
}
/*for screens larger than 767px */
#media (min-width: 768px) {
body {
background-image: url('photo-lg.jpg');
background-size: cover;
}
}
/*for screens larger than 479px */
#media (min-width: 480px) {
body {
background-image: url('photo-xs.jpg');
background-size: cover;
}
}
I've been working with a temp page at http://www.flywavez.com but I can't get the image to resize and be the same in all screen resolutions. On the iPhone it cuts the girl off before the waist, and it fits perfectly when viewed on my 19" laptop screen with the res at 1366 x 768, and even when I fed the video to my 55" TV via VGA from my laptop. However when I view at larger monitors with greater resolution, there is a big space and obvious view where the image size ends. I thought I had resizing CSS with
/* Tablet Landscape */
#media screen and (max-width: 1060px) {
#wrapper { width:67%; }
}
/* Tabled Portrait */
#media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* Tabled Portrait */
#media screen and (max-width: 768px) {
#wrapper { width:100%; }
}
/* iphone */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
img { max-width: 100%; }
}
/* ipad */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
img { max-width: 100%; }
}
I want this image to display on all resolutions as it does when seen on the 1366 x 768.
Thanks for any help.
I think it is fundamentally impossible to achieve what you are trying to do without losing image ratio, which is probably undesirable. Have you considered using the 'background-size' property? The css below achieves a pretty good look:
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can see it here: http://jsfiddle.net/DTN54/
cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
contain This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover
100% This will scale 100% to both of height and width without any cropping.
body {
background: url('images/example.jpg') no-repeat fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Basically, this is all you need:
body {
background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center;
}