I'm creating a website in which I need a full page responsive background image to display across all devices. I have created this image in Photoshop and it is 2560 x 1440 (16:9).
I have included white borders around the top, bottom, left and right of the image in stark contrast to the purple background to make it easier to see what's happening.
For some reason when using the code below, the top and the bottom of the image (the white borders) are being cut off.
This problem disappears when I use inspect element and set the viewport to 1920 x 1080 etc...
My monitor is set to 1920 x 1080 resolution and I am using the Opera browser, also tested in IE though.
Here's an image of what's happening - https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a
There should be equal width white borders on the top and the bottom but for some reason there's not.
Any and all help appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/styles.css">
<title>Hello, world!</title>
</head>
<body>
</body>
</html>
html {
background: url(../media/placeholder.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
It's because you are using background-size: cover it's doing exactly what it should. It will 100% "cover" the element leaving no "empty" space around it no matter how it's resized, and it might cut things off.
Try using background-size: contain instead, that might be more of what you are looking for. 100% of the image will always be visible, but it might leave some blank spaces around it.
Here's a good demo of each background-size option and how it looks
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
FYI, you do not need to include the different vendor prefixes (-o-*, -moz-*, and -webkit-*) for this feature, it's pretty well supported (unless of course you need to support IE8, Firefox 3, etc.)
Related
I'm working on a small website and since I'm almost done with it, I wanted to see it online... Everything went fine, from my laptop, on all screens the website was working great and the background image had the right size/position. I was too happy for that but once I opened it from my phone I got a surprise: the background-image looks totally different compared to the simulation performed from my laptop.
I already tried to add the below code but it did not change anything.
CSS:
.main-cont{background:
linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.0)
),
url("../images/home-background.jpg")}}");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
background-size:cover;
}
#media (max-width: 768px) {
.main-cont {
background-attachment: scroll!important;
height:100vh!important;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{ flask_util_js.js }}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='/CSS/style.css') }}">
<title>Title</title>
</head>
<body >
<div class='main-cont' >
# Nav and main content
</body>
</html>
I'd really appreciate your help, I'm completely stuck!
Link: http://alessio98.pythonanywhere.com/home/
On mobile ( wrong )
On desktop ( correct )
Category section:
Mobile simulator
Mobile
Thanks for the link and screenshots, that helps a lot.
I believe the issue is background-attachment on the div.main-cont HTML element is not supported on the phone you have. In your browser, if you open the inspector and disable (uncheck) the CSS that says background-attachment: fixed;, you will get what you're seeing on your phone.
If you look at the browser support for background-attachment on caniuse.com, it's only 82% overall, and no support at all on Safari. When that CSS doesn't work, instead of the background image getting sized for your screen, it instead gets sized for the div it's in, which is like the height of the page. That's why the image looks zoomed in/huge.
If you want to keep the background-attachment: fixed line, I'd recommend changing background-position to top and adding a new line background-size: auto 100vh to keep the size in check. It won't scroll on Safari, but it'll look more normal.
If you still want this background image to scroll with you, you'll probably have to change tactics and add an HTML element with position: fixed that has the background. Fixed images or content can get messy fyi.
this bug is driving me nuts!
I have a website where I placed a background image on the body element and did the usual no-repeat center center fixed cover stuff, It looks fine on every browswer I have tried except android chrome so far, On android chrome it seems to give the home page some scrolling and you can show white space several hundred pixels high. It works on chrome desktop, and even the various android dev tool simulators.
Here is the CSS I'm using -
body {
background-color: transparent !important;
background: url('../../images/pagesbackground.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
}
I've tried this same css on the HTML element as well to no avail (with a combination of height: 100vh / 100% on both body and or html element). I've also tried taking off the background attachment-fixed, but then on other pages it doesnt scroll down for the content that expands down. I'm using bootstrap, and Angular to serve each page as a template. This is the index.html that serves the templates in the ng-view.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Goldbee Dev</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/styles/all.min.css">
<link href='https://fonts.googleapis.com/css?family=Lobster|Roboto|Titillium+Web|Rock+Salt|Condiment|Mate+SC|Pacifico|Luckiest+Guy' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</head>
<body ng-app="app">
<div ng-view></div>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-animate.js"></script>
<script src="dist/scripts/all.min.js"></script>
</body>
</html>
I've also tried just making the background image a div that contains the ng-view and doing the same thing with no success. Anyone have suggestions?
One bandaid I used for now (as the site is live) - I made it the background of the HTML element again, and made the height 200%. It prevents the whitespace but it scrolls down into a lot of empty area if you scroll down now. Is there a way to prevent scrolling on the home page without JS or Jquery (I know how to code in those, but looking for the simplest method possible).
Screenshots of the issue <- When in a portrait phone sized window it does okay, when fullscreened on desktop the logo gets clipped.
I have an image that I'm trying to use as a background image. The image was given to me with a bunch of UI elements and a company logo on it, and I erased all the UI elements with photoshop but left the company logo on the image.
I found this CSS Tricks article which gave me an easy way to keep the image responsive when I resized the window (wanted to make sure it looked okay on mobile too) but then I noticed The company logo at the top was getting cut off. For reference, the logo is at the near top of the image and is centered.
I used this code from the CSS tricks article:
html {
background: url("img/image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and this is the html:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="mainpageStyles.css">
</head>
<body>
</body>
</html>
Is there a better way to make sure the image stays centered within the window and doesn't get cut-off?
I've also noticed that if the window is too wide and too short the logo can disappear entirely. Should I have the logo scrubbed in Photoshop and display it as a separate image or can I fix this with CSS?
html ,body {
height:100%;
width:100%;
margin:0px;
}
h1 {
margin:50px;
}
.jumbotron {
height:100%;
background-image: url("http://www.zoophotels.com/wp-content/uploads/2015/02/cpt-new.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="jumbotron">
<h1>Welcome</h1>
</div>
</body>
</html>
I don't know what's wrong, but it seems like when i change background-size value to cover, the background doesn't scale based on my browser size, but when i set the value to 100% 100%, it scales like i expect.
So, how to keep the value of cover and let jumbotron class do the right scale (in this case keep the value of background size (cover), while the size when jumbotron do scaling still cover)
Additional Info:
i want the result to be
1.The image cover to be like 100% 100% (fit to screen)
2.When i resizing my browser window, i want the image ratio still same like 1 step
check this web: http://www.qerja.com/
i want the jumbotron looks like this website jumbotron, resize the image width when i resizing the browser windows
Cover is working as expected. The image maintain's it's aspect ratio as it scales in relation to your browser window. Unlike applying 100% 100%.
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
CSS3 background-size Property
I am working on a webpage which contains an header logo. This logo has two logo's in it: one with a transparent background and one with a orange background on the right. The image is like 3.000 pixels wide. I want to resize the image to let both logo's fit in the div horizontally. So that on every device I will see the logo's and a part of the orange background (what makes the image that long.
HTML
<div class="logo-header"><img src="logo.png"></div>
CSS
.logo-header {
overflow: hidden;
}
It indeed overflows nicely as I would want it, but when I use an iPhone 4 or some other small screen I am failing to get it have a minimal width.
Is this possible in CSS or is this something I should do with Javascript?
.logo-header {
background-image: url("http://bighugelabs.com/img/nbcam/ribbon_3000_bg_sh.png");
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
width: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="logo-header"> </div>
</body>
</html>
if you check this image it's 3000px wide.
First of all, i recommend you optimise your image (try tinypng.com) and resize it using paint or some such (rezize before you optimize).
then use background cover and set it as a background image
Maybe you can try to split your image in two images.
With CSS, you then insert the second image (with orange background) as background-image of .logo-header, aligned to the right.