I have a cover photo on the front page of my website and it looks fine on desktop and scales with the browser size being changed, but looks absolutely horribly when opened on a mobile device.
Here's what I am using:
.first {
width: 100%;
height: 100%;
background-attachment: fixed;
position:relative;
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried doing this:
#media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
#media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
But that didn't work.
Any help will be appreciated!
We have a unique class on the image, so set the image absolutely positioned, and set the width using a percentage directly in the CSS.
You are using same classes more than once.
.first {
background: url("../lyuba_final.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
See your reptition below
Define horrible? What happens?
What mobile devices?
if you target the html element it should scale well.
html {
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On mobile devices the image will be most likely cropped.
<html>
<head>
<style type="text/css">
.first {
width: 100%;
height: 100%;
background: url(9.jpg) no-repeat;
background-size: 100%;
/*if you don't want to maintain aspect ratio of image and make it cover entire screen
use: background-size: 100% 100%;
*/
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>
Hope this helps..
Related
I am a beginner trying to display a different header on a mobile screen. The header has a background image portrait of 4 people, which will be too narrow so people will be left out when viewing on mobile.
What I tried is setting the background size to 100%, but this means there is a gray space below the picture (which is now fully visible) on mobile.
smallheader {
background: url(../image.jpg);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
height: 500px;
z-index: 0;
border-bottom: 15px solid #139cb0;
Decreasing the height to 300px on a mobile screen would work. How can I edit the code, or add a new class so that I can edit this height for mobile screens?
#media only screen and (max-width: 430px){
smallheader {
background: url(../image.jpg);
background-repeat: no-repeat;
background-position: center 70px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
height: 500px;
z-index: 0;
border-bottom: 15px solid #139cb0;
}
}
use media query like this
I am trying to make a background image of a div cover the screen on both desktop and mobile devices. It is working perfectly on desktop, but no matter what I try, the image appears zoomed in on mobile.
This is the page: https://www.smithbars.com/tappd/
This is the CSS for < div class="section1" >
/*desktop*/
#media only screen and (min-width: 800px) {
.section1 {
width: 100%;
margin: 0 auto;
text-align: center;
background-image: url(TAPPD1_.jpg);
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #000;
padding-bottom: 2em;
}
}
/*mobile*/
#media only screen and (max-width: 800px) {
.section1 {
width: 100%;
margin: 0 auto;
text-align: center;
background: url(TAPPD1_.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-bottom: 2em;
}
}
Thanks so much for any help!
This is happening because you are trying to use background-size: cover which maintains the aspect ratio of the image.
cover tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
Change:
background-size: cover;
to:
background-size:100% 100%;
The image loses its aspect ratio but you get your wish.
I have a image with the size of 320 * 436 and some particular text data. I need to implement the webpage with the background image as stretch and fit to the screen and the text over the screen. Please help me to implement this using HTML and CSS. Below I have mentioned the code that I have tried. But it does not works:
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<html>
<head>
</head>
<body>
<div class="container">
<img src="background.png">
<p>Data</p>
</div>
</body>
</html>
Thanks in advance
You can achieve this by setting your image as a CSS background image with background size set to cover.
body {
background-image: url(background.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
This will stretch your image to cover the screen, you can then position your text over it.
body {
background: url(background.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center fixed;
}
I have a banner div:
<div class="background" style="background: url(<%= #banner.image.url(:big) %>) no-repeat"></div>
and corresponding css:
#banner {
width: 100%;
height: 275px;
}
#banner .background {
width: 100%;
height: 275px;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
uploader.rb:
version :big do
process resize_to_fill: [1920, 280]
end
On smaller devices, the background-image is cropped, here are the screenshots. Full width:
And a resized window:
Is there any way to make the image be resizable when the screen width becomes narrow? Thanks.
Just use background-size: contain for this
#banner .background {
background-size: contain;
}
try background-size: 100% auto;
I have a display problem in my web site content.
I am creating a website and it displays well on the browser (width 100%) But when I resize the browser screen and I made a transition to the right with the bottom scroll bar a white background appeared.
I'm not using the responsive technique.
I work with a fixed container width (width: 1170px; margin: 0 auto;)
the website: http://www.lemediterranee.com.tn/medet/
Add background-size: cover to main.
main{
background-size: cover;
}
I was able to clear the white background by adding extra style to the main custom element:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Also added prefixes for cross-browser support.
If you are not using responsive design, make your header with an fixed with
.top_header {
background-color: #222d68;
width: 1170px;
height: 45px;
}
Make your slider and main container with fixed width too
#slideshow {
float: left;
width: 1170px;
position: relative;
z-index: 8;
border-bottom: 3px solid rgb(194, 194, 194);
}
main {
background-image: url("../img/backgrounds/main_bg.jpg");
background-repeat: no-repeat;
height: 1075px;
float: left;
width: 1170px;
}
For the footer to
.bottom_footer {
width: 1170px;
height: 45px;
background-color: #222222;
float: left;
}