I have been working on this site below and I am trying to get the banner that is displayed under the navigation menu responsive where you can still see the player in the banner once you scale down to iPhone size portrait.
The code for this area is in the css here.
.tp-page-header {
background-image: url("../images/page-header.jpg");
background-repeat: no-repeat;
padding-bottom: 20px;
padding-top: 20px;}
Website link is here.
http://dagrafixdesigns.com/2019/industrial-darker/about-us.html
This banner is under each sub menu link, other than the home page as it has the slider. I am not sure if anything can be done to the CSS code to make it responsive or it has to be in the HTML as something like the top banner is done.
I have tried it to a degree in the HTML manner, but I didn't have luck.
Not a huge deal as I can get a image color or css color for this background if this wont work, but was thinking it would be nice to use if it responds on scale.
Thank you
Try a combination of background-size: cover; and background-position: 80% 0;. background-size will size the image down to match the container size when it's resized, and background-position will move to the right a little on the x-axis so you can see the football player's head.
I would say to make a smaller version of the image for ex 480 is the iPhone's pixel size, so make it 40 and center it. To show the image when they scale down, use #media (max-width 480px) and inside of the block, set the background image to the new one
Related
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
}
}
How to well display a background image no matter what the size of the screen is?
Is there a preferred image size to work with?
I'm trying the new CSS3 background size attributes (cover) but I can't get a result that works well with small and big screens. I also tried different media queries but it did not work.
Do I have to create several versions of the image for different screens?
Small screen
Big screen
As you can see, on a big screen, it is like it is zoomed in so it does not display the main part of the picture anymore.
How to fix this?
The image comes from unsplash and I did not resize it.
Thanks for your help.
The problem here is that your background area has an aspect ratio of almost 4:1 which is very wide. The picture however has an aspect ratio of almost 4:3.
This is why it becomes a problem in bigger screens. The picture just isn't wide enough.
There are different solutions to this, you could for example have the picture stretch to fit any width. But that might not be the desired behavior.
This is what I would do:
Demo - try resizing window to see behavior.
div {
width: 100%;
height: 500px;
background-image: url('...');
background-size: cover;
background-position: 50% 50%;
}
The background-size: cover property sets the picture to always fit it's entire width inside the container (though height will be cut off if it doesn't fit).
The background-position: 50% 50% sets the background to always be centered. This way, if the background cuts off, you will still see the center of the picture which is probably the most interesting portion of the picture.
i have a problem with the images of my slider in the header. Please take a look at the page.
When the screen resolution is too high, the images are getting cut off. Please focus on the first two images. You can test different screen resolutions here. The images look good until 20" Desktop (1600 x 900). When you test 23" Desktop (1920 x 1080), you won't be able to see the bottom of the first and the second car.
Any idea how I could fix it?
If you don't mind SEO for the images, there is another way to display them. Set them as a background-image on .item elements. And remove img tags. Then in css set something like this:
.item {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
height: 100px;
}
You need to provide a height to elements, so change it to whatever.
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down