I'm making a website with bootstrap's Carousel.
I wish that when the window size is reduced the image in carousel cut equally both left and right margin. How can I do it?
I've used overflow: hidden in the css to cut the image but but is reduced only in the right margin!
Sorry for my bad English, hope to find a solution with you.
Make sure that the image position is centered then when the image is resized, the image will be 'cut' from both sides.
img{
background-position:center;
}
Related
I would like to know how do I achieve the effect in attached image. Logo is an image and transparent while there is still a background to the top navigation.
Thus if user scrolls down, the logo "changes" based on image or color behind it.
I have tried making two divs ( logo and links) within main div ( 100% width and 80px height). If logo is 200px wide, how do I ensure the right division always fills the rest of the viewport.
.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;}
.links{width:???;background:#272727;float:right;}
Appreciate any help and seeing alternative methods.
give widths of the logo and links in percentages which makes the logo container responsive.
.logo{
width:20%;
}
.links{
width:80%;
}
Try this code:
CSS:
.mainnav{widht:100%;position:fixed;height:80px;}
.logo {background:url(logo.png);float:left;width:20%;background-repeat:no-repeat:background-size:100% 100%;}
.links{width:80%;background:#272727;float:right;}
None of the proposed solutions worked under different resolutions.
Best solution probably is to have 2000px image as header and overflow:hidden.
Thank you
I want to centre a banner image of size 1920x225px in a div 960px wide.
the problem occuring is that the image is not in the centre as it starts from top left.
Heres an image to describing the issue
http://tinypic.com/r/scco0m/5
Try using
background-position: center center;
on your background image.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
You did not mention here, how you adding he image in a website
if you are giving background image
give css like this background:url(../image.jpg) center center no-repeat;
If you don't want background image just give max-width:100% for that image
New Answer.
You need to give position:relative for the div having width:960px
and for the image add like this
img{position:absolute; left:50px; top:20px; z-index:999}
You can change the Left and top value according to your Wish
I was wondering if someone could point me in the right direction. I have a div with a large background image. The BG image is set to contain so it will expand and contract with browser size. The issue I'm having is if you shrink the browser, the div still shows the height to 1000px. So while the image expands properly to fit, if you begin to scroll down you see the large gap that now occupies the 1000px height under the picture where the body bg color comes through (since the picture has shrunk via the contain). How can I make it so the div moves up and the gap disappears? I have seen this done on several sites.
CSS Code:
.contain { background-size: contain; }
.mainsplashtop {
width:100%;
height:1000px;
background-image:url(../images/main_splash.jpg);
background-repeat:no-repeat;
margin-top:0;
}
HTML
<div data-stellar-background-ratio="0.5" class="mainsplashtop contain"><a class="scroll" href="#destination1"></a></div>
You can see what I mean on the site (please disregard the disaray as its still in early development)
www.doyouhaveasaddle.com
Here are examples of what im trying to achieve.
http://www.unbornink.com/
http://www.fmolinari.com
Thanks in advance.
I am having difficulty tuning the placement of text on my web page. Items on the page seem to float about and not lock down. I need them to stay static with respect to the background image.
For example, I have a div Item called "leftMenu" I want the left menu to stay approximately 20 pixels to the left of the background image. Things seemed to work until I had to center the background image. Now that the background image is centered, I seem to have lost the ability to lock down div positions with respect to the background.
When the screen is full size things look good, but when the page size is altered the leftMenu drifts all over the place. I'm currently going through a lot of trial and error using absolute and relative positioning, but I can't seem to get the right combination of settings to make the item stay put irrespective of the page size.
Page: http://107.22.173.10/
user: test2
pass: abc111
Any advice would be greatly appreciated.
Instead of using a big background taking a div of text and position it absolutely to the center, why not get a div that's exactly the size of the background image and center it using:
CSS:
html, body{
height:100%;
position:relative;
}
div.siteWrapper{
background: !VALUE;/* your background*/
padding: 0 0 0 0; /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
width: !VALUE; /* width of your background - (left + right padding)*/
margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}
HTML:
<body>
<div class="siteWrapper">
//everything in here
</div>
</body>
As per your requirement acc to me you have to create a wrapper div in which your whole stuff should be present and you need to use jquery/javascript to calculate the position from top, right, left, bottom of the wrapper to make it in center of the screen. For example lightbox of jquery. because when monitor size varies then resolution changes and the position of background image change according to that but content is set according to css set on the id/class on the elements.
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.