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;
}
Related
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 am not able to figure out how can I decrease the height of cloud background according to the image so that even when on mobile, the hand is always touching the cloud background bottom edge.
HTML:
<div class="slidersection">
<div class="sp-photo">
<div class="sp-photo-content">
<a target="_blank" href="https://play.google.com/store/apps/developer?id=IDSstudio"><img style="border:0;" src="images/slider/slogan.png" alt="IDSstudio" class="centered"></a>
</div>
</div>
</div>
CSS:
.sp-photo {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 1000px;
min-width: 100%;
height: 500px;
}
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
/* background-size: cover; */
height: 100%;
overflow: hidden;
background-position: center;
}
img.centered {display:block; margin-left: auto; margin-right: auto;}
.slidersection {
display: block;
padding-top: 80px;
background: rgba(255, 255, 255, 0);
}
At a quick glance:
use a media query to remove the height:500px so that the .sp-photo-content div conforms to the height of the image.
#media screen and (max-width: 640px){
.sp-photo-content{height:auto;}
}
set the background size of the image to fit the width of the screen and position at the bottom
.sp-photo-content{
background-size: 100% auto;
background-position: center bottom;
}
This would be much easier with a jsfiddle to play with ;)
I believe you need to use JQuery (JavaScript) in this case, there are limitations in CSS.
try this link: How to resize an image to fit in the browser window?
I did this to solve the issue:
CSS:
.sp-photo {
position: relative;
margin: 0px auto;
width: 100%;
max-width: 1000px;
min-width: 100%;
}
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
/* background-size: cover; */
overflow: hidden;
background-position: center bottom;
}
Do you want the background image to be 100%? If that's the case, you could do this:
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-position: center;
background-size: 100%;
}
However, a better way to do this would be to use media queries in your css to separate some of the css for mobile and for desktop. I would also suggest uploading a smaller version of that image for mobile - it'll be a hefty size for the mobile browser to download.
The below code shows how you would write the media queries:
/*for the phone - assuming back-mobile.jpg is the clouds background with a size of 480px */
#media only screen and (max-width : 480px) {
.sp-photo-content {
background: url(../images/slider/back-mobile.jpg) no-repeat scroll 0 0;
}
}
/*for everything else */
#media only screen and (min-width : 481px) {
.sp-photo-content {
background: url(../images/slider/back.jpg) no-repeat scroll 0 0;
}
}
I have an image called myImage.jpg. This is my CSS:
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
margin: 0px auto;
}
#header {
width: 640px;
background-color: red;
margin: 0px auto;
}
This made the height of myImage.jpg 100% of the screen and made the width 640px, but it did not center myImage.jpg. myImage.jpg is completely to the left.
How do I center myImage.jpg?
add a background-position: center 0%; to the body rules
I have a cover photo on the front page of my website and it looks fine on desktop and scales with the browser size being changed, but looks absolutely horribly when opened on a mobile device.
Here's what I am using:
.first {
width: 100%;
height: 100%;
background-attachment: fixed;
position:relative;
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried doing this:
#media only screen and (max-width: 320px) {
/* Small screen, non-retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
#media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.first {
background: url(../photo.jpg);
width: 50%;
height: 50%; }
}
But that didn't work.
Any help will be appreciated!
We have a unique class on the image, so set the image absolutely positioned, and set the width using a percentage directly in the CSS.
You are using same classes more than once.
.first {
background: url("../lyuba_final.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
See your reptition below
Define horrible? What happens?
What mobile devices?
if you target the html element it should scale well.
html {
background: url(../photo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
On mobile devices the image will be most likely cropped.
<html>
<head>
<style type="text/css">
.first {
width: 100%;
height: 100%;
background: url(9.jpg) no-repeat;
background-size: 100%;
/*if you don't want to maintain aspect ratio of image and make it cover entire screen
use: background-size: 100% 100%;
*/
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>
Hope this helps..
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%;
}