I have to cut PSD file into CSS and HTML. The problem is container with background image has 1160px of width. This container have only background image on right side so I could be hidden on smaller resolution. Main content container have 996px so it's good.
I'm trying to do it this way:
if resultion is more than 1160xXXX show whole image on right side,
if resolution is less than 1160xXXX hide a smart part of image on the right side.
Image on the right side have to be always on the same place - its relative to the .container .inner which together looks nice.
My code:
.container {
max-width:1920px;
margin:0 auto;
position:relative;
}
.container .background {
background:black url("../img/woman.png") no-repeat scroll right top;
max-width:1160px;
overflow:hidden;
}
.container .inner {
width:996px;
}
The goal is to put background image always in the same place and cut this image if resolution is less than 1160px. Any advices?
EDIT:
For no .container .background changing it's position depending on resolution... I don't want it - image have to be always in the same place.
Use media queries like
#media only screen and (max-width:1160px){
#something{
some css
}
}
You can read more about media queries Here
One new approach often used for mobile and tablet browsers, is to use pairs of images of different sizes. In responsive design, for example, you can use the CSS #media to check the device window width, and return a larger or smaller image depending on the circumstance.
Related
I am displaying footer and header background images on pages using the css-background properties.
#bodyContent {
background-image:url(../images/splash_footer_short.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: contain;
}
Some of my pages however do not have enough content so my footer image overlaps over my header image. I have elected to simply not display the footer image where the scroll height of the page is not tall enough.
How can I provide a conditional so my footer image only appears when the scroll height is long enough?
You could use a CSS media-query to handle this:
#media only screen and (max-height:500px) {
#bodyContent { background-image:none; }
}
The code above is to say, "When the page is less than 500px, hide the footer block"
You will need to adjust your threshold to suit (I guessed 500px, but you can change this to suit your needs).
Also, the footer selector is a guess. You may need to use a class selector, etc, depending on how you have defined your HTML.
This article covers the idea of "vertical responsive" web design (which is what we're discussing here) in more detail
You should add a min-height property equal to the height of the background image.
just use media screen
so :
#footer{display:none}
#media screen and (min-height: X){
#footer{display:block}
}
what i am trying to do is here example is in fiddle
I have .carousel-inner{min-widt=500px;} for large screen size (I want it responsive though)
Now my problem is i want first carousel slider image to be at center-left position of my carousel from top and bottom. and caption is on right side center and viz.
I have tried this code... but when i go on smaller devices the images goes on the caption.
https://jsfiddle.net/xe05ro61/4/
You can add just width:100%; of your image, i think then after your problem is solved.
Try below css:
Css:
.item img {
width: 100%;
}
See Fiddle Demo Link
You will often need to use specific css rules for the small screen, to adapt your website to any browser size.
To achieve such a thing, the common way is to use #media .
To define a css rule that will target only screen with width under 640 px, use :
.myclass{
background:red;
}
#media screen and (max-width: 640px) {
.myclass{
background:green;
}
}
On PC screen, you will get a red background, on small mobile screen, a green one.
Now, replace these useless color definition by your position rules.
I currently have a header which is of an image (the width = 1920px and height = 250) It sits at the very top of the page, and looks well with some resolutions.
But when i got to a resolution that actually changed my screen size, the image is still 1920px and then allows me to scroll. Is there a way of making it scale down to fit the page?
You can make your image responsive.
You can use bootstrap and add class for your image.
e.g
<img src="xyz.png" class="img-responsive">
OR
You can manually try to make your image responsive with CSS rules.
e.g
max-width:100% !important;
max-height:100% !important;
display:block;
You will have 2 things here.
As the screen size differs your image should get fit in the window.
You need to maintain the aspect ratio of the image in responsive design, otherwise your image will be stretched out (It is a challenge to maintain aspect ratio in responsive design).
For the first one you can use width:100% and height:auto also max-width:100% to make sure it does not cross your section.
If you are designing based on some particular resolution then use media query
#media (max-width:768px)
{
width:... // define your width based on the resolution
}
Now the 2nd point : How to maintain aspect ratio. Follow the steps here:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Also, found a stackoverflow post, which will be useful to you :CSS force image resize and keep aspect ratio
You may use the responsive image code that is:-
img {
width: 100%;
height: auto;
}
Else if you have images for multiple resolutions you are recommended to use media Queries:-
//set width as per requirement
#media (max-width: 900px) {
background-image: url(img/cover.jpg);
}
How are you showing the image in the header? Using img tag or using background-image CSS property?
If you are using <img> tag, then you need to set max-width: 100%;
If you are using background-image property, then you need to set background-size: 100% auto;
Hope this help
Thanks
Hi I am trying some stuff out with html and css to see what works and what doesn't, and I was wondering if it is possible to make an image stay in the center of your screen and always adapt to the size of the screen. For example an image that when I look at it on a screen that's 1920*1080 is 192*108 large and when I look at it on a 1600*900 screen it becomes 160*90 whilst the center of the image stays in the middle.
PS: It doesn't matter that the resolution of the image changes even though it makes the image sometimes look terrible.
You can't do this with just an image tag. You could put the image you're using as background-image and then set the sizing to cover. Basically this:
body {
background-image: url('url/to/your/image.jpeg');
background-size: cover;
background-position: center center;
}
To adapt to the size of the screen,place image in container and then do :
img{
width:100%;
height:auto; /*maintains aspect ratio */
}
now image will have the dimension of container!!
To align image in center of your div...do:
div{
width:80%;
margin:0 auto; /*align div in center first*/
text-align:center /*center content*/
}
taken from
Use CSS to make an image scale up and down
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past its natural size, so it doesn't look deformed.
I'm having a problem trying to center a background horizontally in the following situation:
background is large and has to be centered horizontally
the page has a minimum width of 960px and there has to be a scrollbar on smaller screens
So i've decided to do this (pseudocode):
<bg-div> # this will contain the background image with "center center no-repeat" option
<content-div> # this will be 960px margin 0 auto
</content-div>
</bg-div>
Live example: http://jsfiddle.net/CtMRt/4/
The problem: The background should stop centering itself on smaller than 960px resolutions, but instead a white gap appears on the right side of the page and the background keeps centering itself. How would i solve something like this?
Thanks for your thoughts
You can use css media queries: (working jsFiddle)
#media screen and (max-width:960px){
bg-div{background:url(..) left center;}
}
Also, you didn't set min-width:900px; to the container.. try using: (another working jsFiddle)
.sec { height: 90px; min-width:900px; }