I’m working on setting up a site and I have images that are all different sizes as they are different ad sizes i.e. 300×600, 728×90, 320×50 etc. On this page. you’ll see it briefly shows the full image the appropriate size (i.e. you can see the shrunk image), but then it zooms to fit the crop size and some images disappear completely.
I have tried changing the sizes, the hard cropping, and regenning thumbnails each time and I cannot get them to look correct. How do we do it?
https://fullforceads.com/product-category/ads/static-ads/series1s/
When the page first draws I see them with enough space but then it zooms in on each thumbnail, but I cannot see what's causing it. I looked in the developers' tool, but think I'm missing something basic. I looked for a plugin that would add whitespace above and below, but couldn't find anything.
Your CSS is the issue here. I inspected your images and I found this:
.products .product .thumb-image, .products .product .hover-image {
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
}
The background-size: cover; is the issue here because it tries to scale the image up so it fills the entire space. If you change that setting to contain, the image will only be as large as possible without cropping:
.products .product .thumb-image, .products .product .hover-image {
background-position: center top;
background-size: contain;
background-repeat: no-repeat;
top: 0;
left: 0;
}
The reason why the image is first displayed normally and then scales up is the following: if your webserver is slow or your CSS file is very large or if the CSS is loaded badly, it takes time for the CSS rules to take effect. That results in having the images displayed normally at first, then the CSS kicks in and the image is scaled up. Changing your CSS as I described should fix this.
I don't know your setup, but you might need to insert that CSS either in the theme settings or create a child theme, depending on the theme.
Related
I uploaded a custom image to my WordPress site to use as a header background. I have it displayed using the following CSS:
.main-header-bar {background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;}
This allows the image to stretch the width of the screen even when the screen size changes.
The challenge I need help with is getting the height to adjust along with the width.
I think the issue is the height of the header area is defined by the font size chosen for the site title, the tagline, and the menus. To illustrate, when I move the browser window from a medium sized screen to a large one, my image size increases to match the size of the new monitor, but the font of the title, tagline, and menus remains the same. Because the height is now insufficient to contain the image now that it is wider and taller, it cuts off the bottom of the image.
Is there an elegant way to address this?
For reference, I am using the Astra theme.
Thanks!
UPDATE: I've done some more experimenting. I've discovered that the image is not actually "cut off" per se. The whole thing is there. However, on the larger screen, at the normal 100% zoom, the content of the page is displayed overlapping the image. If I zoom in, the image remains at 100% the width of the page while the title, tagline, menus, and content enlarge. The title expanding pushes the content down and the entire image becomes visible.
What I'd like is for the title and the header to be in sync with one another. Right now the image size is set relative to the screen size (100%), while the text size is set by a font. Is there a way to tie these to things together so there is a consistent appearance?
UPDATE:
I think I figured it out, mostly. I'm sure I'm doing something sloppily because I don't quite understand it all. By calculating a font size and using "vw" it makes the font size adjust based on the width of the screen instead of pixels. Since my header image also does that, it lines up (not perfectly, but it works between the screens I'm testing on well enough). Here is the code I added:
html { font-size: calc(0.75em + 0.5vw) }
.site-title {
font-size: calc(7.1vw)}
.site-description {font-size: calc(1.6vw) !important;}
.menu-item {
font-size: calc(1.8vw);}
How about trying it with a media query to satisfy the larger viewport.
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: 100%;
}
#media only screen and (min-width: 600px) {
.main-header-bar {
background-image: url("image url");
background-repeat: no-repeat;
background-size: cover;
}
}
My image: http://path.com.my/v2/wp-content/uploads/2016/05/Home-Page-Banner-B.jpg
Website: http://path.com.my/v2/
Check 2nd slide
The slider image, no matter what resolution of images I put in, it will still 'zooming' in too much in the center and cut off too much details. Changing the the image aspect ratio doesn't seem to do any good either.
I have try to use background-size: cover, but it would leave blank spaces on the side, and doesn't do any good in different screen sizes too.
Any idea on how to best achieve this so I can put in my image with the least crop or zoom in?
Try the following:
.home #content .slide {
/*[...]*/
background-attachment: fixed;
background-size: 87%;
background-position: 250px 0;
}
I have a background-image which I made responsive by adding background-size: 80%; to my CSS code. When I minimise the browser window it works to a certain extent, the thing is: I want the background-image to stop reducing at a certain point, as the other elements on my site do. But it reduces infinitely. To illustrate what I mean, check it up on my website: http://www.filmfutter.com/forum/
It's the white image at the top.
Currently the CSS code looks like that:
background-image: url(../images/blueTemptation/blueTemptationHeader.png);
background-size: 80%;
background-repeat: no-repeat;
background-position: top center;
You might add a media query breakpoint at that specific point. The given pixel value are approximate.
#media only screen and (max-width: 1140px) {
body {
background-size: 897px;
}
}
What I want is for the background video to fit the screen lengthwise(y) and crop sides widthwise(x) when less than the ratio. As it is now, when someone is looking at in in a long skinny browser, half the video gets cut off on the right rather than both sides being shrunk and centered on the middle. Alternatively I would like the whole thing to stretch in every direction and fit the browser, but I've also searched every page about that and none of the commands seem to work... I dunno maybe less has a new command, but I can't find it...
I am editing the .less file to accomplish what I need and almost all of the css commands seem to work except the one I need or at least, not anywhere I've tried putting it... still not sure what the difference between css and less is aside from newer/better. Here's what I have, it's the best I've found so far. it shrinks to the middle at least when it gets small:
// Background
#rt-top-surround {
position: relative;
video {
position: fixed;
width: auto;
height: 100%;
min-width: 100%;
-webkit-background-size: cover; }
-moz-background-size: cover; } these do nothing at all
-o-background-size: cover; } neither does background-size: 100%;
background-size: cover; }
.backface-visibility(hidden);
}
No matter what I do I can't stop it from preserving the aspect ratio. Any help for either full screen or centering the background video will do. Thanks in advance
-Scott
(I have only been teaching myself how to program websites over the last 2 days so I may not understand everything you say. Please keep that in mind. However, I did program and re-write a site from a template since then and I have been through every single file on ftp and read through the css just to learn what I can. I actually know a pretty decent amount)
You starters your CSS is invalid, #rt-top-surround isn't closed off so anything under that is broken.
// Background
#rt-top-surround {
position: relative;
} /* <------ here! */
As for background-size, this only applies to background-image not a video element. You can simply set width to whatever you want and because height:auto is applies be default it was scale with aspect ratio.
jsFiddle
HTML
<video>
<source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>
CSS
video {
width:100%;
}
I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span out and extend without showing a white space at the end.
You basically have two choices:
Use a repeating pattern that fills the entire width: you can do this using
width: 100%; background: url(your-image-file) repeat-x
Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.
Well, to start, lets clear your margins with this code.
* {
margin: 0;
padding: 0;
}
By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.
Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.
Finally, it's time to place the last bit of code and get it all working.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will work with dang near all current browsers (except IE8 and below).
In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.
This can be done with height as well.
Hope this helps.