How do I resize my image to only fit the header for my website? My background-image is url("image/header\header.jpg");
Background-size: cover; Need assistance thanks. The picture isnt my work but a tutorial I'm working with.
You Can use thumbnail class in bootstrap for this purpose.
For more info on this check out Bootstrap CDN.
Related
I am building a website using wordpress and the theme is "Infinite Photography".
My problem is: on the homepage you see the featured images of all posts: www.konradfoerster.de/wordpress
When I change the size of the browser window, the images will be cropped from the middle. I don't want that.
However when you click on an image and open a single post and then change the size of the screen, the image scales but it does not crop. I want this behaviour for the homepage too!
I need the behavior like here: https://demo.kaliumtheme.com/photography/. Here when you make the browser window smaller, the images will be just scaled, not cropped.
How can I do this? I googled a lot, but could not find anything. For example I tried this one, but it did not work. disable cropping featured image in wordpress
Would appreciate any hints.
Edit: here is the screenshot of the document inspector. I think the styles, that apply for each image are in the class .acme-col-3.
screenshot document inspector
.masonry-item.post-item {
...
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I am building a website using Foundation Zurb 5. The website will have a page that has an h1 tag to display the page title. Underneath the title, I want to show a high resolution image. By itself, the image's resolution is 1920 x 1200. This image will be used on the large version of the page as well as the mobile version.
When the image appears on someone's computer (the large version), I want it to have a maximum height of 200px. This currently works. However, when the image is viewed on a mobile device, I want it to scale down such that it takes up the full width of the device. This latter requirement is not working. Currently, I'm trying the following:
<div class="th">
<img src="/res/img/sample-01.jpg" style="max-height:200px; max-width:100%;">
</div>
I suspect the problem has something to do with landscape vs portrait viewing. However, I'm not sure. At the same time, I'm not sure how to accomplish what I'm trying. Does anyone know how to do this? If so, how?
Maybe you should try to use background image for that:
for example:
.th{
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
<div class="th" style="background-image: url(/res/img/sample-01.jpg)">
</div>
I suggest looking at Interchange and modify the actual images. That way you will not load the large 1920 x 1200 image on someone's mobile device. I believe this is a more elegant solution, but I am not sure how comfortable you are with image manipulation.
Another approach would be to use the Visibility Classes. If you went this route you could have two divs or two img. One for large screens (desktops) using the show-for-large-up class and one for smaller screens (tablets/phones) using hide-for-large-up.
Is there a way to make a HTML5 video (and the poster attribute) to act like a centered background cover?
I've created a dummy pen you can play around width:
http://codepen.io/SEFarstad/pen/vujqE
The layout is based on two 50% width sections, where the left one will contain the fixed video and the right one will containt the absolute positioned content.
The main problem is that my design needs to be split vertically, making horizontal videos an issue. Is there a way to make these horizontal videos full height in a vertically based layout it like this? -in the same manner as you use background-size: cover;
I know you can use background videos etc but I need this to have controls, posters and so on to meet some interactivity demands I have on this project.
I know this is an old question and you've probably moved on to other things, but I wanted to answer just in case anybody else stumbles on to this via Google. What you were looking for was object-fit, a way to add that kind of behavior to videos and images. Here's some info on it, but basically you just need to write it like this:
video {
... // other stuff here
object-fit: cover;
}
Sadly, you can't use this on every browser just yet. However, there's a polyfill you can look into.
I've got a site which although not responsive, should just show a scaled version of the desktop site when viewed on iphone or ipad. The problem is that my main background image is being compressed for some reason. If I resize the browser I can't recreate this issue, so am just struggling to figure out what's going on iOS which is causing it. The site is - any help would be greatly appreciated!
Added info: the issue seems to be with div.bg-main and it's background image settings, set on line 243 of style.css
iOS has a 2 megapixel limit on background images. Your image is 1587*1340 = 2,126,580 pixels - a bit too much. It therefore shrinks it.
You can use the background-size property to fix the size back up to what you’re expecting. You’ll lose some detail but it’ll be the correct size. Add this to your CSS:
.bg-main { -webkit-background-size: 1587px 1340px }
You can chop your big image with 2 parts and add 2 backgrounds to a div.
Like this:
background: url(1.jpg) top center, url(2.jpg) bottom center
That image is huge, maybe that is the issue. Try reducing the size with 'save for web' (try getting the design to work with a .jpg).
I have a background image, 1000x666px, and only 93kb. I use it as a background image, with this code:
url(/Optimized-image1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
When i set this image as a background, my jquery effects are very slow and not smooth at all. The same happens with my google maps stuff.
When i set the background just white or any other color, it's all smooth, so I think my CSS-code isn't that good.
I've tried to preload the image with javascript, but that's not good. Also base64 is not working.
Any tips?
It seems background-size: cover; performs poorly, at least in chrome.
see Poor performance of Chrome using background-size: cover
Here's a list of alternative solutions http://css-tricks.com/perfect-full-page-background-image/
Have you tried layering your images and dom objects with z-indexes to make sure they arent competing for resources?
Firstly, you can optimize your images with SMush It . Also you can optimize your all CSS files with Clean CSS .
If you want to 'smush' your images dinamically, you can use Smush It, still.
1) User will upload an image
2) Get new uploaded image's URL ($imgurl)
3) Make a request to
http://www.smushit.com/ysmush.it/ws.php?img=$imgurl and get it's
content (it's a JSON) to $content
4) parse JSON with $newimage = json_decode($content);
5) Your new and optimized image's URL is $newimage->dest download
and use it :)