I am displaying footer and header background images on pages using the css-background properties.
#bodyContent {
background-image:url(../images/splash_footer_short.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
}
Some of my pages however do not have enough content so my footer image overlaps over my header image. I have elected to simply not display the footer image where the scroll height of the page is not tall enough.
How can I provide a conditional so my footer image only appears when the scroll height is long enough?
You could use a CSS media-query to handle this:
#media only screen and (max-height:500px) {
#bodyContent { background-image:none; }
}
The code above is to say, "When the page is less than 500px, hide the footer block"
You will need to adjust your threshold to suit (I guessed 500px, but you can change this to suit your needs).
Also, the footer selector is a guess. You may need to use a class selector, etc, depending on how you have defined your HTML.
This article covers the idea of "vertical responsive" web design (which is what we're discussing here) in more detail
You should add a min-height property equal to the height of the background image.
just use media screen
so :
#footer{display:none}
#media screen and (min-height: X){
#footer{display:block}
}
Related
I have been reading stack overflow for some time but this is my first post!
I have this website: https://oliv-collection.com/.
The banner on top is full width as long as the screen you view it with has a resolution of less than 1600px (the original picture width). Once the resolution is greater than that, the banner does not cover the entire width of the page.
Is there an easy way with CSS to make the width and height increase so as to cover the full width? I have been fighting with Google Inspector but can't figure out what to do!
Thanks
There might be better ways to do this, but I managed something close to what you ask for by changing the styling of the banner images to the following:
.slick-slider .nm-banner img, .nm-banner img {
display: inline-block;
width: 100%;
}
What I did was replace width: auto; to width: 100% to make the image resize correctly, and remove max-width: 100%; and height: auto;. With my change, the banner image will increase with the width of the screen even above 1600px. This works for me in Safari on macOS.
You should use
width: 100%;
Whatever the width of the screen is, the banner will be with maximum width.
Set the margin of the HTML body in CSS to 0.
body {margin: 0;}
I have added a background image to my header and it looks great at smaller size but I lose the full image at larger size. here is the code I have so far
.fusion-top-header .fusion-header {
background-image: url("http://127.0.0.1/OTG/wp-content/uploads/2020/01/sunset_background.jpg")!important;
background-size: cover;
background-repeat: none;
background-position: center center;
}
I want all screen size to have the image look like what it is in the small screen one. I have the logo and menu moving and adjusting for screen size just not the image
Any help would be great.
Thanks
Problem is this:
When you enlarge your screen height of your element .fusion-header remains the same. Since background-size is cover your image is trying to be full width, hence automatically gaining height.
You have option to set background-size to contain and background-position center, or you have option to adjust your .fusion-header height via vw/vh units.
As far as I know I can' t say that there is anything else.
I’m trying to create a site using Wordpress. I created a theme and most of my pages are created using page templates because I wanted to stay away from the blog look.
Everything looked great until I viewed the site on my ipad in portrait mode. I have a huge white space at the bottom of every page. I used Chrome Canary’s developer’s tool but could not find the element that’s causing the whit space.
I’ve been searching forums for days and tried solutions that have helped others with the problem. No luck so far.
I tried using media queries like:
#media only screen and (min-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1) {
Html,body{
Overflow:hidden;
}
Still have the huge white space at the bottom of every page when I’m in portrait mode on my ipad.
Please help me find the fix for this problem. Here’s a link to my site: http://www.davidsdrift.com/
Thanks for any help.
Remove the two background-size properties from body and add background-size: cover;.
Add this selector
html {
min-height: 100%;
}
Your background should now cover the entire screen regardless of resolution. You may also wish to add background-position: center center; too.
Example
html {
min-height: 100%
}
body {
background: url(images/homePage.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
If your site design has a static height, then any browser that is taller than that height (most mobile browsers, since they're in portrait orientation) will just stop at that point, and not put anything else below. The browser just defaults to "nothing" (i.e. white space) after that.
You could set a simple background color, so that it's not just defaulting to white below your designed area (body {background-color: #CCCCCC;}), or try something fancier than that.
Or, (gulp) you could totally re-jigger the site to not use a static rectangular design.
It depends if you want to put image to fill 100% your height just add
background-size: 100% 100%;
Else if you want to fill content use percentage not pixels for full height
To add to Joe's answer: The reason why you are seeing white space on the ipad in portrait mode is because of the aspect ratio and orientation of your background image.
There are countless fixes for this, however they all depend on what you would like to do with that extra white space. You could enlarge your background to cover the whole space, repeat the background, use CSS3 properties to create a mirror effect, etc.
Assuming you just want the background to take up the whole space when in portrait mode use this:
#media (orientation:portrait){
html{ min-height:100% }
body {
background:url(images/homePage.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center center
}
}
Is there a way to make a website 100% fluid?
As in, fill the background edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes without neccesarily retaining aspect ratio. Images inside divs and font sizes should obviously resize accordingly and maintain the same amount of white space so the page shows exactly the same content in screens from 800x600 to 4K Ultra HD, being the idea to above any kind of vertical scrollbar. Let's forget about mobile and tablets for a moment.
What I have tried for background:
body {
background-image: url(./Si0rPf7.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Which will fit background as long as the aspect ratio of the image is kept, the moment it changes you will see white spaces on both sides. If cover instead of contain, image will get cropped, which is undesirable if we want to show our whole background to everyone, even if we have to stretch it.
Now, for img src I've had half success with two methods:
.image_1 {width: 100%; height: auto;}
and
<img src="img/image_1.jpg" width="100%"/>
None of them seems able to react to both width and height. Looks like you have to choose between one or other.
For font-size I would just use vw and hope for the best.
You want
background-size:100% 100%;
You should look into the flex model: https://philipwalton.github.io/solved-by-flexbox/demos/grids/
I have to cut PSD file into CSS and HTML. The problem is container with background image has 1160px of width. This container have only background image on right side so I could be hidden on smaller resolution. Main content container have 996px so it's good.
I'm trying to do it this way:
if resultion is more than 1160xXXX show whole image on right side,
if resolution is less than 1160xXXX hide a smart part of image on the right side.
Image on the right side have to be always on the same place - its relative to the .container .inner which together looks nice.
My code:
.container {
max-width:1920px;
margin:0 auto;
position:relative;
}
.container .background {
background:black url("../img/woman.png") no-repeat scroll right top;
max-width:1160px;
overflow:hidden;
}
.container .inner {
width:996px;
}
The goal is to put background image always in the same place and cut this image if resolution is less than 1160px. Any advices?
EDIT:
For no .container .background changing it's position depending on resolution... I don't want it - image have to be always in the same place.
Use media queries like
#media only screen and (max-width:1160px){
#something{
some css
}
}
You can read more about media queries Here
One new approach often used for mobile and tablet browsers, is to use pairs of images of different sizes. In responsive design, for example, you can use the CSS #media to check the device window width, and return a larger or smaller image depending on the circumstance.