I want my background image to be responsive in mobile view.
I used this to scale my background image to the whole desktop:
html {
background:url("image/2.jpg") no-repeat center center fixed;
background-size: cover;
}
But I cant have a great result in this: (this is most requested suggestion in my search)
#media only screen and (max-width: 600px) {
html{
width: 100%;
}
}
This is a desktop background
While this is what happens in my mobile view
One elegant solution would be to better controlling exactly what you want to show in landscape and portrait mode. If you want to be responsive with a landscape image on a portrait screen you necessarily have to "lose something", as per #salff comment
My snippet for being more flexible depending on user screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html
{
background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
background-size: cover;
width: 100%;
}
#warning-message { display: none; }
#media only screen and (orientation:portrait)
{
#wrapper { display:none; }
#warning-message { display:block; color: white;}
html
{
background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
background-size: cover;
height: 100%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<h2>Responsive Images</h2>
<p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
<p>Resize the browser window to see the effect.</p>
</div>
<div id="warning-message">
this website is only viewable in landscape mode
</div>
</body>
</html>
NOTE: the code was produced crossing and tweaking your code, w3schools snippet and this answer
You could add something like this:
.yourelement {
background-image: url("https://i.stack.imgur.com/viNrB.png");
background-repeat:no-repeat;
background-size:contain;
background-position:center;
height: 247px;
/*Additional code (don't bother adding this):*/
text-align: center;
color: white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="yourelement">Your content goes in here</div>
</div>
</div>
</div>
JSFiddle
You could also replace contain with cover but requires adding some more code. Something I found for this:
.ratio4-3 {
width: 100%;
background-image: url("https://i.stack.imgur.com/viNrB.png");
background-size: cover;
height: 0;
padding: 0; /* reset */
padding-bottom: calc(100% * 3 / 4);
}
.text-center {
text-align: center;
color: white;
}
<div class="ratio4-3">
<div class="text-center">
content could go in here
</div>
</div>
JSFiddle
Related
I am making a website and I stumbled upon a little problem.
I have the image set to be to height: 100% and width; and background-size: cover;
Is there any way I can make the footer appear so that you scroll UNDER the image?
.bg {
/* The image used */
background-image: url("./Resources/home_bg.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
HTML code looks like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg"></div>
</body>
</html>
It sounds like you only need to add a z-index to your divs.
The footer would have the smaller number z-index, while .bg is the larger one.
Also, I added a container and gave the footer a background color to just show the effect that I think you're going for.
.bg {
/* The image used */
background-image: url("http://placehold.it/400x400");
/* Full height */
height: 100vh;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 10;
}
footer {
background: #ff0000;
position: fixed;
bottom: 0;
width: 100%;
z-index: 8;
}
.container {
height: 105vh;
}
<div class="container">
<div class="bg">BG</div>
<footer>footer</footer>
</div>
i was put .svg file as background image.
in small screen it was ok, but when i show in large screen it was cut from top and bottom
i want to show background image in full height/width as original size in large and all screen
demo image
-here is my code
.bg {
width: 100%;
height: 540px;
background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
float: left;
width: 100%;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
</body>
</html>
You have to make the div height = pageHeight(header height and appropriate margins should be minus).
.bg{
width: 100%;
height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
border: 1px solid red;
box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
Think it has to do with the background-size.
Maybe this works better for you? (practically the same, btw if contain isn't what you want try cover.
background-size: contain;
background-repeat: no-repeat;
background-position: center;
could you prehaps show what you want with an image.
So I am relatively new to this. But I noticed that my page looks differently in Safari and Chrome mobile.
(These red lines are just lines on the picture)
It seems Safari scales my picture more than Chrome and because of that all content is moved.
So, how should I code this situation so it looks more similar in both browsers? The thing is I want to make a slide-show so I need notes to be bound to the images.
My MWE:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
</head>
<style type="text/css">
body {
margin: 0;
overflow-x: visible;
color: #fff;
font-size: 76px;
}
.wrapper {
height: 100%;
display: flex;
}
.container {
height: 100vh;
}
.slide {
width: 100%;
padding: 120px 0;
background-position: center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: flex-end;
}
</style>
<body>
<div class="container">
<div class="wrapper">
<div class="slide" style="background-image:url(./images/bg01.jpg)" >
Love
</div>
</div>
</div>
</body>
</html>
This is due to the property defined in your css:
.container {
background-size: cover;
}
The devices are not the identical in height, so it needs to manipulate the image to "cover" the screen area as the size of the device increases or decreases.
Your best bet is to use a fixed height for the image or page.
You can learn about full page backgrounds here:
https://css-tricks.com/perfect-full-page-background-image/
I have problem making my banners up and down my webpage scale to always fit the user's screen so I don't have horizontal scroll bars which is bad experience on mobile phones as desktops as well. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<style type="text/css">
body {
background-image: url("TBG_02.jpg");
background-color: #cccccc;
background-size: cover;
background-repeat: no-repeat;
}
#top,#bottom{width:100%;}
#top,#bottom{height:155px;}
#top{position: fixed;left:0;top:0;}
#bottom{position: fixed;right:0;bottom:0;}
.topp{background-image: url("BG_02.png");background-repeat: no-repeat;background-size: cover;}
.bottomm{background-image:url("BG_03.png");background-repeat: no-repeat;position:fixed;background-size: cover;}
</style>
</head>
<body>
<div id="top" class="topp">
</div>
<div id="bottom" class="bottomm">
</div>
</body>
And this is how the problem looks like:
https://imgur.com/a/WscYr3D
You may notice the bad gray/white space in the photo as well. To note: I will add some images as buttons above the banners. Any ideas?
Your approach is basically sound in using:
background-size: cover;
to ensure that the browser resizes the image to cover the whole of the <body>.
What you are missing though, is that the height of the body does not cover the whole height of the viewport.
To fix this, you can add:
body {min-height: 100vh;}
ie. the height of the body must never be less than 100% the height of the viewport (or 100 viewport-height units).
Working Example:
body, .top, .bottom {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
body {
min-height: 100vh;
background-color: rgb(204, 204, 204);
background-image: url('https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg');
}
.top, .bottom{
position: fixed;
width: 100%;
height: 45px;
background-color: rgb(0, 0, 0);
}
.top{
top: 0;
left: 0;
}
.bottom{
bottom: 0;
right: 0;
}
<div class="top"></div>
<div class="bottom"></div>
The answer from Rounin was cool but it made some troubles; the only thing it missed is that there is no image to put in the divs so they can appear on the banners, then I had to set their width and height and playing with them a bit until it fixed :D
<body>
<div class="top">
<img src="BG_02.png" class="top"/>
</div<
</body>
I want to insert an image by CSS because I want to use captions over my image.
What I want is that the image shows completely and is responsive.
Can anyone help me with this?
Here you can see my HTML im using bootstrap. As you can see i want to let contentblock1 show an responsive image by using the CSS background-image code. I also want this background image to be responsive. But whatever i try it won't show me the background.
<div class="container">
<div class="col-sm-6">
<h1> Dit is een bootstrap site</h1>
<button type="button">click me!</button>
</div>
<div class="col-sm-6">
<div class="contentblock1">
</div>
</div>
I'm using the following CSS
.contentblock1 {
background-image: url('http://1.bp.blogspot.com/_zxdOSKs0ASI/TDMqbnatRwI/AAAAAAAAAkM/nB-DxcVcqqk/s1600/Testbeeld.jpg');
background-size: 100% 100%;
width: 100%;
}
width: 100px; /*you width*/
height: 100px; /*you height*/
/* optional: background-color: white; */
background-image: url('image.png');
background-repeat: none;
background-size: 100% 100%;
/*or
background-size: cover;
background-position: 50% 50%;*/
background-attachment: fixed;
#some-div {
background-image: <imgurl>;
background-repeat: none; //Unless you want something else
backgorund-size: 100% 100%;
}
and for responsiveness, use media-queries or a lib that is made for responsiveness such as Bootstrap.
Below you have an example of media-queries.
#media (min-width: 1200px)
{
#some-div {
width: 600px;
}
}
#media (max-width: 768px)
{
#some-div {
width: 100%;
}
}
EDIT:
http://jsfiddle.net/e8xLf4u3/
Here is your working example, it only needed content. Also, in the future please show some code for faster help and better understanding
Graag gedaan ;)