Please see example: http://jsfiddle.net/H5x9N/
I have a page that aligns to center, 1020px wide. I then want ads on the left and right of it contained in divs that do not cause scrolling.
here is part of the code that will display the ads:
.majorad-container {
height: 1px;
left: 50%;
margin: auto auto auto -1250px;
overflow: visible;
position: absolute;
width: 2500px;
z-index: 20;
}
.adscrollleft {
background: url("") repeat-y scroll right top #0A080B;
cursor: pointer;
float: left;
height: 120px;
margin-top: -20px;
width: 720px;
}
.adscrollright {
background: url("") repeat-y scroll left top #0A080B;
cursor: pointer;
float: right;
height: 120px;
margin-top: -20px;
width: 720px;
}
If i use position: fixed for .majorad-container - no x scrolling, but i want the ad to scroll up with the page.
I hope that explains my problem well, any solutions?
make the ad's background images and than use background cover
#divname{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:0%;
max-height:100%;
}
Related
How can I get the image on the left side of this site to completely fill the div, even when you have to scroll down below the viewport?
http://anjanettetodd.com/
Right now I'm using this code...
html, body{
height: 100%;
margin: 0;
padding: 0;
}
div.left {
float: left;
width: 45%;
background-image: url('img/anjanettetodd.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
min-height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
Add position: fixed; to fix the left div, where you could scroll down though the right div. So it looks good and the scroll will not show you an empty space
What I need (and failed) to do is website like in this picture:
Website need to be full screen and no scroll.
I'm not satisfied with results, because:
-when website is opened on vertical screens (smartphones) the bottom border is too big
-I also tried to make this background image to show fully top and bottom (I want to faces at top and bottom to be seen in full, not just partly), but I don't really know how to do it.
My CSS code:
html
{
background: #f36d32;
width: 98%;
height: 95.9%;
padding: 1%;
}
body
{
background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
Ok, the border problem is solved by #imGaurav with such a code:
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
But I still can't figure out how to make both top and bottom faces to be visible.
body {
background: url('http://web-industry.eu/landing/img/bg.png') no-repeat;
background-size: 100% 100%;
width: 100vw;
height: 100vh;
box-sizing: border-box;
border: #f36d32 3px solid;
padding: 0;
margin: 0;
}
<body></body>
So you just want the full size image to scale with different with different screen sizes?
In your css on the image div try:
background-size: contain;
If that is not what you are after, here is a link to all the property values you can use and test out.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Add below CSS to your HTML body
position: absolute;left: 0;top: 0;
Did you mean somethink like that?
<div class="vertical-container">
<div class="vertical-middle">
<img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png">
</div>
</div>
html,body {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
.vertical-container {
background-color: green;
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.vertical-middle {
height: 100%;
vertical-align: middle;
display: table-cell;
}
https://jsfiddle.net/org72bfb/1/
You can use the following css to solve the problem. Reference CSS-trick
html {
background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm trying to put in the right place a button which is a sibling with a div which have a cover background image. Every time when I stretch the cover div (to be "responsive" in some way), I want the button to be in the right place about this cover image. I mean that the cover div image has some graphics (feathers) and I want the button to be between them every time. How can I do that? Thanks in advance.
My HTML
<div class="cover_bgr"></div>
<div class="main">
Click
</div>
My CSS
.cover_bgr {
background: url(http://www.hdwallpapers.in/walls/colorful_background-wide.jpg) center no-repeat;
min-width: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
position: fixed;
top: 0;
left: 0;
min-height: 100%;
height: 100%;
}
.main {
position: relative;
margin: 0 auto;
z-index: 100;
height: 500px;
width: 100%;
}
.btn {
position: relative;
top: 30%;
left: 70%;
padding: 15x 5px;
background-color: #2a2a2a;
display: inline-block;
color: #fff;
}
My JSFiddle:
http://jsfiddle.net/onlinepch/w7v6L578/
Here's my JSFiddle
html, body {
height: 100%;
}
#background {
height: 100%;
background: url(http://phosproject.com/wp-content/themes/phos_theme/images/7.jpg); no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.button {
position: absolute;
top: 50%;
left: 50%;
width: 440px;
height: 460px;
margin-top: -230px; /* Half the height */
margin-left: -220px; /* Half the width */
}
On my website the background seems to have a white border around it and makes it look bad and i was wondering how i could remove it.
The html body has a default margin. You need to remove it.
body {
margin: 0;
}
Updated fiddle.
I have a display problem in my web site content.
I am creating a website and it displays well on the browser (width 100%) But when I resize the browser screen and I made a transition to the right with the bottom scroll bar a white background appeared.
I'm not using the responsive technique.
I work with a fixed container width (width: 1170px; margin: 0 auto;)
the website: http://www.lemediterranee.com.tn/medet/
Add background-size: cover to main.
main{
background-size: cover;
}
I was able to clear the white background by adding extra style to the main custom element:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Also added prefixes for cross-browser support.
If you are not using responsive design, make your header with an fixed with
.top_header {
background-color: #222d68;
width: 1170px;
height: 45px;
}
Make your slider and main container with fixed width too
#slideshow {
float: left;
width: 1170px;
position: relative;
z-index: 8;
border-bottom: 3px solid rgb(194, 194, 194);
}
main {
background-image: url("../img/backgrounds/main_bg.jpg");
background-repeat: no-repeat;
height: 1075px;
float: left;
width: 1170px;
}
For the footer to
.bottom_footer {
width: 1170px;
height: 45px;
background-color: #222222;
float: left;
}