I've been researching how to use media queries properly, below is the site I'm trying to make responsive. However, I'm finding trouble adjusting the image of my picture, I test the responsiveness on my PC, which is 17 inches and also on my Galaxy 5.
**edit, the problem is solved for me
.background-image {
position: fixed;
z-index: 1;
background:url(nycgold.jpg) fixed;
background-size: cover;
background-position: center;
padding-top: 13%;
padding-bottom: 100%;
font-family: 'Montserrat', sans-serif;
}
#media only screen and (max-width: 320px) {
/* styles for narrow screens */
.background-image{
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 1800px) {
/* styles for MacBook Pro-sized screens and larger */
.background-image{
width: 100%;
height: auto;
}
}
Any help is appreciated.
First, you've got 3 styles here:
The default style
The style for max-width:320px
The style for max-width:1800px
But all three styles set the background image to the same size. Backgrounds are not really something that you need to write responsive code for because they generally try to fit the browser's rendering area, but background-size:cover set once in the main style would ask the browser to fill the background with the entire image, so setting widths isn't necessary.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size for more information about the background-size CSS property.
To test out your media queries, make sure that there are DIFFERENT values set for elements in them and use something that is better suited to responsive, like an image in the foreground. <img src=""> or text size of an element.
If what you want is for the background to show once, with no repetition, add this background-repeat: no-repeat;
Other than that, your image should fit the whole width of whatever size the MQ is.
Related
I have a 3051 x 1716 pixel image.
When in mobile I want to view it like the following without cropping the image and uploading it second time:
I mean I just want to change the horizontal center of the image and change the width according to sceensize given it is a mobile screen.
How can I do that?
You could do a media query on a background-image like below, but its actually not best practice: only load what you really need on mobile devices to get faster pageloads. And don't use background images to display important content... so you might wanna look into using the picture tag and responsive images: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
However, if two seperate image files are not an option, here is a solution:
.container {
background-image: url("https://images.unsplash.com/photo-1615731364858-99013ac4fad3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80");
background-size: cover;
background-position: left;
height: 100vh;
width: 100%;
}
#media only screen and (min-width: 600px) { // set to your mobile view breakpoint
.container {
background-position: center;
width: 100%;
height: 300px; // or whatever height you want
}
}
<div class='container'></div>
Can you please check the below code? Hope it will work for you. If you will take an image as a background image then you will be able to set the position of the image as per your requirement. We have used background-size and background-position properties to adjust the image.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xhsb7ocL/3/
.banner-bg {
background: no-repeat center center / auto 100%;
position: relative;
display: block;
width: 100%;
height: 400px;
}
#media screen and (max-width: 767px) {
.banner-bg {
background-position: left center;
}
}
<div class="banner-bg" style="background-image:url('https://i.stack.imgur.com/Y3Wi7m.jpg')">
</div>
I am currently developing the footer of a web page in HTML / CSS. This footer will contain a lot of elements (address, links, buttons, ...) and it must, therefore, be responsive. Consequently, on a desktop version, we have all the footer's elements on a row and, then on mobile we have all the footer's elements on a column (as the following images show you);
My goal is to get the result below on a widescreen (desktop):
And here is the result I want to achieve on a mobile screen:
As you can see, we must have a zoom effect when resizing the page of a browser or when we pass on a smartphone screen. I have a lot of elements to insert in the footer so the image must be zoomed to integrate them all.
Here is the code I have done so far.
.footer {
height: 639px;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
<div class="footer"></div>
The result is almost what I want but the problem is that the height of the footer does not change, and therefore I do not have enough space to put all my elements in the footer in the mobile version.
Thank you :)
Try adding height: auto, padding-top, padding-bottom in a media query for phone. You may have to experiment with the padding values a few times to make it look good. Also change the background-position so the curve can be seen on mobile phones. It will look something like this.
#media (max-width: 991.98px){
.footer{
height: auto;
padding: 50px 0;
background-position: center top;
}
}
#media screen and (min-width: 480px) { //480px is breakpoint you can adjust according to your need
.footer {
height: auto;
background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
background-position: center top; //adjust according to you need
background-repeat: no-repeat;
background-size: cover;
padding-top: 3rem; //adjust according to your need
padding-bottom:3rem; //adjust according to your need
padding-left:inherit;
padding-right:inherit;
}
}
<div class="footer"></div>
I only want to add an image (size 1920x1080) in my html for my 1920x1080 screen. The thing is that if I see my web in full screen (F11) it works perfect, but if I see it normally (with the OS' window, browser's bookmarks, etc.) it cuts the image's height. The CSS code used is the following:
html,body{
margin:0;
padding:0;
height:100%;
overflow: hidden;
background-image: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Is there any way to get the image perfectly without full screen? Or to know how much height it takes my window and browser? Because, if not, then other people with the same monitor screen size, but with different browsers and OS, could have different results.
background-size: auto auto;
This will preserve the original size (and will be clipped at the edge). "Cover" always resizes the image to cover the container.
Alternatively, you can check the user's screen size and resize the background accordingly.
html, body {
background-size: auto auto;
}
#media only screen and (max-height: 720px) {
html, body {
background size: 1280px 720px;
}
}
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
}
}
etc.
You can also give the container a "min-height" or a "min-width" in css so the picture won't be cut even if the screen size a bit smaller than what you specified.
Example:
#media only screen and (max-height: 480px) {
html, body {
background size: 800px 480px;
min-width: 800px;
min-height: 480px;
}
}
I check different webs to see the effect I described. In all I found there is a cropping effect because of the window of the browser (in the height of the image). Instead of full 1080px height we usually see images cropped in height. So I guess that it is inevitable to crop it a little bit if we don't visit the web in full-screen.
One mini-solution is to decide where should crop it (background-position: center top; crops the bottom part). Other is to make the web with a margin at top (not advised for people visiting with other methods: mobile, full screen, etc.)
The style that maybe can do what you want is background-size: auto 100%;, so it take the height of the browser to the size of the background, maintaining the proportion width.
Try to use this styles, so the image height is always the height of your browser. The bad part is that the image if it doesn't have a big width, it can have white lines at the sides.
html {
height: 100%;
background: url("image.jpg");
background-color: white;
background-position: center;
background-repeat: no-repeat;
background-size: auto 100%;
}
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have a big background image, but the image is not good in small mobile browser. It displayed a horizontal scroll bar and the image is crop.
The image should be:
The 3 person in the image should be display in the center
No scrollbar
How to fix this?
CSS (responsive)
.header-home-div{
background: url(/testEnvironment/files/homepage-header-mobile.jpg) !important;
height: 700px;
width: auto;
I tried to use this:
background-size: cover !important;
background-position: center top;
but it's not working
Here's the link
I use this to test the responsiveness of the image
On the mobile size, you use an !important to the background property. So you need to use !important for setting a size too like this :
#media screen and (max-width: 992px)
.header-home-div {
height: 1500px;
width: auto;
background-size: 100% !important;
}
It's better to remove the !important property at first instead of overwriting it with the above fix by the way.
The horizontal scrollbar depends on .header-home-h1 margin. The following should fixed it :
#media (max-width: 520px)
.header-home-h1 {
text-align: left;
margin: 0;
width: 100%;
font-size: 2.25em;
}