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;
}
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'm using background image on main div and different elements positioned in it. Background looks good in desktop and scrollable in mobile version. I would like to have either scrollable of overflow-x in tablet or full view of image in tablet.
When i apply overflow-x:scroll; to the div that has background, i'm able to scroll things on top of it but not background itself.
I tried background-attachment: scroll; it is not working. and background-size: cover is also not working.
What is the best way to tackle this?
What is the media query i can use to make same view for mobile and tablet?
P.S: I'm using two different images for desktop and mobile. I could use either of the images for tablet.
This what i've in tablet view for main div
#media (min-width: 768px)
.virtual {
background-image: url(/*****/stage);
background-position: center -30px;
min-height: 500px;
}
This what i've in mobile view for main div
#media (max-width: 767px)
.virtual {
overflow: hidden;
}
This what i've in mobile view for inner div(of main div)
#media (max-width: 767px)
.hotspot-container {
background-image: url(/****/stage-sm);
background-position: center center;
background-repeat: no-repeat;
background-size: 1341px 768px;
position: relative;
min-height: 500px;
width: 1341px;
top: 2px
}
Iam working on a wordpress theme, and i want to make my logo to overlay over my slider .
I tried couple of ways with css . But it seems that its getting bigger on smaller screens . Whould i should use media queries and make it visible none on smaller screens ?
My CSS code to the logo image.
#media screen and (max-width: 767px) {
.logo img {
display: none !important;
}
}
.header_mid_inner .logo img {
max-height: none !important;
max-width: none !important;
left: 50px !important;
top: 100px !important;
width: 135px !important;
height: 150px !important;
border: 1px solid white !important;
}
If I get it right you want to make the logo responsive with the banner top. To achieve this you need to use % values not pixels for height and width. Also the positioning must be in % so it will rescale with the page.
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.
http://graduateland.com/
How do i prevent the images from compression. When I reduce the size of my browser window, the image get compressed side way, it's like the human head being compressed.
Looking at that website as an example, the image size isnt affected when screen size changes, only the position of the image changes. How do i do that?
Current CSS
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
If you want images to be resized when the window shrinks, just change height: 500px to height: auto in the CSS you posted. This will force images to keep their original ratio as the width changes. The way your code works right now is that it resizes the image horizontally so it is never wider than its container, but has a fixed height, which messes up the aspect ratio once it begins to shrink horizontally.
If you want the image to stay the same size and just move position as the browser window shrinks you need to apply them as a background-image. Try this CSS code on the container div you want to apply the image background to:
#container {
background: url(path/to/image.jpg) no-repeat center top;
}
On the site you linked they are appyling this CSS
display: table;
width: 100%;
height: 100%;
margin-top: 0;
padding-bottom: 0;
background-image: url("a/image.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
onto a div. But there are great inspector tools which can inspect that for you, so don't ask if you have a 'living' example.
You should particularly have a look at the background properties.
Here's the answer:
Responsive Images with CSS
CSS:
max-width:100% !important;
height:auto;
display:block;
Use #media, like:
#media screen and (max-width: 1280px) and (max-height: 1024px) {
.splash {
background-image: url('../img/splash-1280.jpg');
}
}
#media screen and (min-width: 1281px) and (max-width: 1920px) and (max-height: 960px) {
.splash {
background-image: url('../img/splash-1920.jpg');
}
}
In their CSS:
#media (max-width: 1280px)
[id="get-started"] {
background-size: auto;
background-position: center top;
}
Which overrides:
background-position: center center;
background-size: 100%;