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; }
Related
I have this stackblitz below with an ngx-bootstrap carousel.
https://stackblitz.com/edit/ngx-bootstrap-tuizsh?file=app%2Fapp.component.html
I've set the max-height for each img tag to 600px (don't want the height larger than this on large screens)
It looks fine on mobile and even on ipad/ipad pro in vertical mode.
But as soon as I expand an ipad to horizontal or view it on a larger monitor in full screen the image starts to stretch its width too much and doesn't look good.
Is there any way to fix the width from stretching like this while keeping the max-height at 600px?
I've gone seen the carousel and after changing the window width the image moves to the left leaving a white space on the left. I added a min-width of 100% and an object fit of cover to prevent it from being squeezed up to the center but otherwise spread.
img {
max-height: 600px !important;
min-width: 100%;
max-width: 100%;
object-fit: cover;
object-position: center; // You can change this to bottom, right or left depending
// on the position you want.
}
I have been trying to fit my background image to responsive view, but all I have been getting is cropped image.
.container_bg {
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
height: 1635px; /*My Image height is 1635 px
}
<div class="container_bg">
A
</div>
Now when I switch to "iphone x" view from chrome inspection
Only top left part is shown, How can I adjust the size of background
as per responsive mode.
I also used background-size:100% auto
It shrinks the image and all my contents goes outside the DIV.
Is there a way, or should I make different image size for responsive?
To make your background stretch over, use background-size to stretch it which will mean you don't need the height and background-position will allow you to center the image in the middle of the screen.
.container_bg {
height: 1635px;
background-image:url("https://i.imgur.com/qjAvmjN.jpg");
background-size: cover !important;
background-position: top center !important;
}
<div class="container_bg">
A
</div>
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.
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 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.