I have a large background image that is a specific height and width which I'm happy with for desktop. I'm using background position centre top atm, so I can see the entire image but width is cropped as browser width is reduced.
There is a specific central part of the image that is the focus, so once I reach a specific browser width (around 1000px - where the image is cropped on the width), I'd then like that viewable area of the image to respond down to mobile retaining the visible cropped width that the browser has dictated... is this possible?
Many thanks
I dont know what you exactly mean but I think that you want to use a media screen.
#media screen and (max-width:1000px) {
img{
width:100%;
}
}
Reply on the post if you mean something else I will help you out :)
Related
I'm working on a Wordpress site where I have a background image that serves as my logo and my actual header image is transparent. Due to the way the header image resizes on mobile, there is a big empty space between my logo (the background image) and everything below it when viewed on a phone. It looks great on desktop & a tablet.
Is there a way that I can resize the height of that transparent header image only on a phone, without messing up the size of it on desktop or tablet?
You can view my site here, if needed.
Would be easier to show in actual code but you can adjust the sizes and only make it impact the sizes you define with media queries - read more about here
If you look at the screenshot, you can see that the a tag had a height of 150px. If you regulate it a bit, the space between logo and menu won't be as far.
Here is an example that will make the new change of height on the .header-image .site-title a only on sizes less that 450px.
#media screen and (max-width: 450px) {
.header-image .site-title a {
height: 100px;
}
}
max-width means when ever the screen is under 450px, min-width would be over.
This was just an example, you can change it to whatever you prefer and you can of course add multiple media queries.
I'm developing a wordpress theme and I'm having a bit of a problem.
In my homepage I want a wide background image with some text centered on it. So far pretty standard.
The thing is, I want the height to stay the same and as the browser gets smaller, the image should crop from both sides accordingly so the image stay centered.
Here is a great example I found, try resizing it and look at the big image at the top:
http://www.shopstyle.com/
How can I get this effect?
Thanks in advance! :)
You can use property background-size with value cover, which was made for that purpose
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
set the height you need (you can set different height for FHD, HD, Tablet, Mobile with media queries) and the image will be cropped from sides and zoomed if needed (if it's shorter than height you set)
Additionally to using background-size: cover;
You should use view port height to control the height of the image. This way it will always be a certain percentage of the view port height, no matter if it's a desktop, laptop, phone, etc. It's the more fluid way to display a height.
Example (covers the whole screen):
.yourelement {
height: 100vh;
}
Example (covers half the screen):
.yourelement {
height: 50vh;
}
Adjust accordingly.
In my website, i have placed an image after the navigation bar. What i expect is the image re-size itself according to the size of the screen. Actually it does re-size but it leaves a blank space above the image when it re sizes which looks award.
The image fits exactly when the scrren resolution is above 1170px. But when i re-size it to lower resolutions it tends to introduce the blank space.
I have tried many element styles like margin-top: auto, margin-bottom:auto etc. But i couldn't hide that space dynamically. I am so new to the web site development. please help me to fix this issue.
change the style:
.carousel_gallery_item_inner { vertical-align:bottom;}
to:
.carousel_gallery_item_inner { vertical:align:top;}
I'm making a responsive blog for both mobile and desktop users (all in one). With respect to image resizing, I understand that I can use width:100%; height:100%; so that they scale proportionally depending on the page size, but I've noticed that smaller images upscale to fit the width of the DIV that it is in. Let's say my DIV has a max-width of 640px but an image I include within it in 500px.
What CSS can I use to keep the image at 500px and then scale down proportionally if the resolution width falls below 500px?
The reason I'm asking this is because not all images in posts may be 640px wide.
Set your image max-width property to the actual image size.
Why don't you just set max-width:100% and leave width off.
I want to add a notice to the top of my page that appears when the browser:
Supports media queries
Is in portrait orientation
Is too narrow for portrait orientation to work
To this end, I have an element #portrait_alert with the following CSS:
#portrait_alert {
display:none;
position:fixed;
font-size:8pt;
top:0;
left:0;
right:0;
/* a few more styles such as background, text color, etc. */
}
#media all and (orientation:portrait) and (max-width:500px) {
#portrait_alert {display:block}
}
It works just fine when I test it on my desktop and change the window size to be taller than it is wide, and less then 500px wide. However, on a mobile browser the right:0 seems to only apply to the initial viewport. When I scale the view down it leaves a gap to the right, and when I scale up it overflows the screen so you can't read it.
How can I fix this?
(Bonus question: Why can I still zoom out when I specify minimum-scale=1.0?)
You cannot trap the zoom activity of the mobile browser like you can with window.resize or even css width and height. The reason is the viewport is still x pixels wide, it's just zoomed in, not larger or smaller. If someone sooms in or out, all of the elements on the page stay as they were originally loaded. The reason for this is they don't want programmers to change the elements on a page when a user zooms in, e.g. resizing the text, because that could possibly negate the reason a user zoomed in the first place. The user wanted to zoom in on your text and when they zoom you keep resizing the text, could be annoying right?
Try jquery mobile, sencha touch, jqmobi, etc. These frameworks have prebuilt fixed position headers and footers. here is an example http://jquerymobile.com/test/docs/toolbars/bars-fixed.html