I have a problem creating a responsive image (the cloud) using CSS. I want that cloud to be fixed.
This is my HTML:
<div class="r-img" style="background:url(./img/cloud.png); width:587px; height:330px;">
</div>
This is my css:
.r-img img{
top:30px;
right:5px;
overlow:hidden;
display: block;
}
I want the page to look like this:
http://imgur.com/NAsDsNy
When I use a lower resolution or CTRL + Scroll I see this:
http://imgur.com/OHSAvrE
I just want the image to stay fixed when someone use ctrl + scroll or when someone access the page with a lower resolution than mine. My resolution is 1920 x 1080.
You can try to use background-size with some percent value (e.g. background-size: 30%).
DEMO
Percent value here is a key: when using it sets background size relative to the background positioning area. When browser window zoomed this area changes accordingly. So visual effect is that image size is the same no matter what zoom level is.
Place the image inside a container whose dimensions are defined and then place inside the image and maximize it`s size to 100%.
img { position:absolute; max-width: 100%;}
That way, the image size will always change, but the changes will respect the dimensions and proportions of the container (parent). This is called image resizing under the scope of RESPONSIVE DESIGN.
To assign dimensions to the image container, use fluid grid dimensions, like:
.2_cols {width: 153px;}
or if want a 100% width:
.12_cols {width: 920px;}
Other method is to use a background image:
body.cloud {
background: url(/img/ban_home.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute; z-index: -1;
}
Everything is funnier with #media (into your css):
#media (max-width: 767px) {
// Your css (of the image) when you are on mobile
}
#media (min-width: 768px) and (max-width: 991px) {
// Your css (of the image) when you are on tablets
}
#media (min-width: 992px) and (max-width:1199px) {
// Your css (of the image) when you are on medium screen
}
#media (min-width: 1200px) {
// Your css (of the image) when you are on large screen
}
This could help you to handle your image better.
Just configure your size wherever you want:
.r-img {
width:587px;
height:330px;
...
}
Check out http://www.w3schools.com/cssref/css3_pr_background-size.asp for sizing a background image. Zooming into the page will make everything bigger, but people on smaller screens will see the image as the exact same size as you unless you use percentages on your widths and heights.
To test different resolutions instead of zooming in and out, just change the browser window to different widths and heights. Firefox and IE11 now have responsive tools to change the browser window to the different resolutions of screens which you can use to test your websites.
Related
I am using wordpress to develop a website called littleboyauciton.com. I added an image at the top right of my header, and added css code:
img.sslsecure {
max-width: 40%;
min-height: auto;
}
This is displayed normally on my computer screen. But when I use chrome to simulate the ipad screen, the picture cannot be displayed on the header.
I added the css code corresponding to the screen in css, but it still has no any effect:
#media only screen and (max-width: 768px) {
img.sslsecure {
background-attachment: scroll;
}
It is doing exactly what it should do, it takes up 40% of the width of it's parent div. When you inspect the element, you can see that the parent actually almost takes up 100% of the screen width.
You can fix this by adding extra css for different screen sizes. This can be done in the theme you are using.
Or you can add extra css and write a media query yourself.
See:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Edit.
I just saw that you've tried adding a media query. You did it right, yet you have to change the width of the element or the parent element. background-attachment: scroll; only applies to elements with a background-image. Since this is an img, it doesn't apply to this element.
Let'say, I don't want the image to be wider than 100px:
#media only screen and (max-width: 768px) {
img.sslsecure {
max-width: 100px;
}
}
Goal
I have a background image that on a computer or laptop browser I want it to show 100% width, but I only want it to show 1/2 of the image if you cut it vertically on tablet and if it's phone I want it to show 1/4 of the image if you cut it vertically.
What I've Tried
Tried using clip-path in CSS but that makes it horizontal scroll enabled which I don't want.
On browser should look like this
On Tablet
On Phone
On tablet and phone the rest of the image should not be visible via scroll. It should only allow vertical scroll and that's simply the background.
You can achieve this with media queries and the background-size property.
/* Default (mobile) */
body {
background: url(https://i.stack.imgur.com/np7c0.png) no-repeat;
background-size: 400%;
}
/* Tablet and up */
#media only screen and (min-width: 600px) {
body {
background-size: 200%;
}
}
/* Desktop and up */
#media only screen and (min-width: 768px) {
body {
background-size: 100%;
}
}
Here's a demo: https://jsfiddle.net/zxqcgkLp/
Note: you may need to play around with your breakpoints, depending on your specific needs. Here's a useful guide from CSS-Tricks that shows common device breakpoints:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
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 want to create a header image for my site. I want it to be responsive and I'm taking the 'mobile first' approach. I have a picture, and as title suggest, I want it to be displayed differently based on device's display size BUT it still has to be the same image file. For example, on mobile I will see only small part of the image, but as soon as I hit certain width, it will change to full size. This site http://adopciaki.pl has exactly what I want - I tried to replicate their layout but to no avail. Thanks for help!
there're several possibility's to achieve this, for example, on mobile:
img{
position: relative
width:auto;
height: 100%;
left:50%;
transform: translateX(-50%);
}
this will position the image centered, give the wrapper element a overflow hidden
then on tablet or desktop you can set the width to 100% and the height auto and so on...
One solution would be to use an SVG copy of the image and use CSS media queries to size it based on the screen size - https://jsfiddle.net/rkr9psbf/1/
#media (min-width: 1200px) {
img {
width: 300px; height: 300px;
}
}
#media (max-width: 600px) {
img {
width: 150px; height: 150px;
}
}
You'll see the image shrink to half the size by making your browser window smaller. Hope this helps!
In short, How to design the full screen background images (maintaining the aspect ratio) for HTML5 (to be ported to different platforms/ devices)?
Im using Intel XDK/ Apache cordova-3.x for building an HTML5 app. From this link i understand, that i can configure different images for the splash screen/ icon for different resolutions/ screen sizes.
And Is there any way i can specify my background images just like the splash screen image? Or should i use a responsive HTML design as mentioned at this link?
I recommend using responsive design leveraging CSS for setting your images' height and width to 100% or use media queries for various screen sizes.
For example,
/*Background Full Screen Image*/
body {
background: url("images/img.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
/*Background Full Screen Image if the document is smaller than 300 pixels wide*/
#media screen and (max-width: 300px) {
body {
background: url("images/img.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
}