I'm pretty new to this stuff but I am learning as I go and taking courses too but sometimes I hit a small roadblock like this one.
When the browser is at 100% the back images are great but as you minimized all the way to 25% the background image position collapses or "hides" and I'd like the images' background position center top to remain intact no matter minimize or maximize.
I've attached an example:
It is zoomed out to 25%. You can visit
medshopandbeyond.com and zoom out to also see the problem.
This is the html I used for the background images:
<div id="header-image6"></div>
This is the CSS I used for them
#header-image6 {
background-image:url("{{ 'WhoWeAre3.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
margin-bottom: 0px;
width: 100%;
margin-top: 30px;
}
Checked out your code and found this:
#media only screen and (min-width: 320px) and (max-width: 480px){
#header-image6{
background-image:url("//cdn.shopify.com/s/files/1/0930/6704/t/2/assets/WhoWeAre3.jpg?7803954532461737215");
background-repeat:no-repeat;
background-position:center;
margin:0 auto;
width:340px;
height:250px;
margin-left:-20px;
display:none;
visibility:hidden
}
}
For viewport width between 320px and 480px, you are re-setting the element's width and height and thus the image shrinks.
You can let the width and height to be 100% as it is in the default case. Please comment if there is anything else to put forward.
In the class "#header-image6" that you provided, do change "background-size:contain".
Hope so it will help you else do not hesitate to ask here.
Related
I'm having issues getting background images to display full screen (take up the whole background space) with a Squarespace page. My CSS was working but somehow it stopped working and now I have a gap on the bottom of the screen. The issues i've been having with Squarespace and how it sets up HTML for you, so recreating this issue really does not help. Instead, you can view the page at richiequake.com and use the password Help123 to access it. This issue happens in the Desktop version and Mobile version of the page. This is my CSS for Desktop:
#collection-5de6d28545f1a7075b7a2741 #canvas{
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 11px !important;
background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For mobile I've been trying:
#media only screen and (max-width: 400px) {
#collection-5de6d28545f1a7075b7a2741 .canvas{
max-width: 100% !important;
max-height: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
padding-top: 11px !important;
background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
I think my issue is with an HTML element that is taking up the space at the bottom of the screen, but I can't find this element and have not found a way to have the background image take up the whole space. What do I need in my CSS code to fix this? Am I using CSS on the wrong HTML element?
To address just the height of that particular image background, add the following:
min-height: calc(100vh - 11px);
Add it within the #collection-5de6d28545f1a7075b7a2741 #canvas{...} rules you already have and that should work. Note that the 11px is based on the value you currently have for padding-top. If you were to change that value, you'd want to similarly update it within the min-height rule as well.
What that is doing is saying, basically "if the content of the page isn't tall enough to fill the current height of the browser window, use a minimum height of however tall the browser is, minus the padding-top amount on the element".
I am using a background size cover for an image I want to display in my homepage full screen when you enter the site.
.image1{
background: url(../img/nike.jpg) no-repeat center center;
width: 100%;
padding: 20px 10px 60px 10px;
height: 100vh;
overflow: hidden;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
However, since the image is really wide, I want it to be all in the screen when you enter the site with a phone. That´s why I have used the following media query:
#media (max-width:600px) {
.image1{
width:70%;
background-size: contain;
}
}
That is working and now you can still see the full image in mobile screens. But obviously it is not filling all the background. It has white space above and below it. So what I want is the text and logo I am going to put to appear in the white space above the image, and not in small size inside the image. I don´t know how to do this since the text and content I am placing is originally inside the div with this image as a background.
The only solution I can think about is to set the margin-top in the media query to -200px but I don´t think this is a very good practice.
You can see the site live in www.text.hdeprada.com It is a simple page with just this issue I am trying to fix.
use backstretch js , it will resolve your problem. Its easy and reliable.
Try scaling the image inside the div with this
background-size:200%;
scale the % to fit your need
I'm creating a website for a friend of mine.
We got these layout and i've put a flexible background which scales to the current browser size. But the icons placed on the background needs to stay in relative position while scaling the window.
Means if i resize the window it would be fine to have the icons stay on there position.
#icon1{
/*Back*/
position: relative;
//margin-top: 20%;
//margin-left:10%;
widht:20%;
top:20%;
z-index:10;
}
html, body {height: 100%;
// width: 1600px;
margin: 0 auto;
overflow:hidden;
}
#inhalt {height: 100%;
// width: 1500px;
margin: 0 auto;
background: url(wp-content/themes/html5blank-stable/img/bg_small.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
z-index:0;
}
Example
At the moment the icons are fixed at their position.
Thank you for your hints
With the comments from #Paulie_D, I managed to achieve this by, instead of using a backgroud-image for the map, I used an actual image with an img tag. By using an actual image, I the icons scaled to the size of the image (since now the image determines the size of the container). When I used the background image, I had to manually set the height or width of the container, which might not be the actual size of the image.
I tried to make responsive sprites (backgroud Image) using CSS3. Like I have done this but nothing is shown in the div, I think there should be some contents (but I don't want to put any content) so that div get some height, then the background image will be shown.
HTML:
<div class="cbs-news-logo"/>
CSS:
.cbs-news-logo {
background-position: 0 27.272727%;
background-size: 122.439024%;
max-width: 100%;
background-image: url('logos.png');
}
I tried many links, but cannot find a good one.
If i understood you..
.cbs-news-logo{ // Responsive background
background: url('logos.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: NNN px) { // if you do not want to show any content until some properties ( note that now is max-with, but it can be other )
.cbs-news-logo{ (...)
}
.cbs-news-logo {
background-image:url('https://www.google.co.in/images/srpr/logo11w.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
min-height:125px; // if u want change hear
max-width:800px; // if u want change hear
}
<div class="cbs-news-logo"/>
Here is the simplest solution:
HTML:
<div class="cbs-news-logo"/>
CSS:
.cbs-news-logo {
background-position: 0 27.272727%;
background-size: 122.439024%;
max-width: 100%;
background-image: url('logos.png');
padding-bottom: 16%; // This will give height to the div and make the div responsive so the (background) image behaves as responsive image.
}
If you want to see the demo.
I'm trying to make a landing page, and it needs to be 100% of viewport, example .
As you can see, picture is 100% of width and height.
I've succeed to make it 100% of width, but for height I haven't. Picture is bigger than my viewport.
This is my css code :
body {
background-color: #e3e3e3;
}
#main_wrapper {
width:100%;
height: 100%;
float:left;
background-image: url("http://imgur.com/B2y6wuI");
background-position: center top;
background-size: 100% auto;
}
#wrapper {
width:970px;
height:1000px;
margin:0 auto 0 auto;
}
#landing {
width:100%;
height:800px;
}
if you are working with html5/css3 you can use height:100vh (instead of %... vh = viewport height)... EDIT: depending on what browsers you want to support.. http://caniuse.com/viewport-units
with css3 you can
#main-wrapper{
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;
}
Could you clarify what you are trying to do here? If you are trying to have a full size background image that scales to the width and height of your viewport, then a lot of your CSS is unnecessary. There is certainly more than one way to skin a cat but in this case CSS3 allows us to use
background-size: cover;
http://jsfiddle.net/LtMpw/6/