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
Related
I have a div which constains an image with diferent srcsets. I have set the div and image width and height to 100% so that the img embrace the whole page, so it is easy to assum that depending on the device screen it will show a bigger or a lower portion of the image when it doesn't fit on the div.
I'm ok with that, but the problem is that I want the image to be showed by the top so that if the height doesn't fit the 100% of the screen height and a part of the img gets cutted it is the bottom of it, but the img starts loading by the bottom and its the top the who gets cutted.
.portada {
width: 100%;
height: 100%;
}
#portadaImg {
height: 100%;
width: 100%;
object-fit: cover;
}
.portadaLetras {
position: absolute;
color: #FFFFFF;
font-size: 2em;
width: 33%;
min-width: 170px;
text-align: center;
background-color: #000000;
}
.centerBoth {
display: flex;
justify-content: center;
align-items: center;
}
<div class="portada centerBoth">
<img id="portadaImg" class="img-fluid" srcset="images/portada/portada-xl.jpg 2400w,
images/portada/portada-l.jpg 1200w,
images/portada/portada-md.jpg 992w,
images/portada/portada-tablet.jpg 768w,
images/portada/portada-mobile.jpg 458w" src="images/portada/portada-mobile.jpg" alt="Foto de portada">
<div class="portadaLetras">
Saint Paolo
<p>MMXIV</p>
</div>
</div>
Any idea what property am I missing?
Add the following property to the .portada class besides the ones I already had:
object-position: center top;
If you don't HAVE to use a srcset, why not use a background image instead of an image tag?
It would simply be:
.portada{
background: #000 url(../path/to/image.jpg) no-repeat;
background-size: cover;
}
Edit
I'm a little confused but if you are still willing to use a background image, perhaps the issue is with your Div styling.
Apply this CSS on the body tag instead...
body{
background: #000 url(../path/to/image.jpg) no-repeat center top;
background-size: cover;
}
You can do this by absolutely positioning your image inside a div with overflow: hidden.
The below image is 225px tall, but its parent div is only 160px tall, so it gets cropped from the bottom, leaving the top of the image alined with the top of its parent div.
.image {
position: relative;
overflow: hidden;
width: 378px;
height: 160px;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
<div class="image">
<img src="https://images.pexels.com/photos/52903/pexels-photo-52903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=225&w=378" alt="colored pencils">
</div>
A more generic solution that will replicate the effect of background-size: cover; background-position: top center would look something like this:
.image {
position: relative;
overflow: hidden;
width: 378px; /* or whatever */
height: 160px; /* or whatever */
}
.image img {
position: absolute;
top: 0;
left: -100%;
right: -100%;
margin: auto;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
}
I am looking for the page look; when there is a (what looks like) frame in the centre and an image around that or a blank background. http://hopelessrecords.com/about-us/ this is a link to a site, the page and background idea is what I would like to achieve.
(I didn't know how to phrase this properly so forgive me if my terminology is off and there is something out there that I missed when searching).
Try it in css
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(./yourImage.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 1230px;
margin: 0 auto;
background-color: #fff;
}
And this in html
<div class="yourPage">
Your content
</div>
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: url(http://lorempixel.com/400/200/);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
.yourPage {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
}
<div class="yourPage">
Your content
</div>
Just add the below to your styles.css
body { padding: 5em 15em; /* adds a spacing of 5x the font size to the top and bottom, and 15x of that to the left and right sides of the page. */
Read for a complete guide on padding, or check MDN article on box-model
Hope you all will be fine..!
I just started converting a PSD to HTML as i am beginner learner so did bad HTML/CSS programming,so here i am facing an issue now,that has alot of white space right in the last of content and before footer which need to be removed.
here is the link to the Index.html page : http://www.webngraphicssolutions.com/urgent_psd/index.html
waiting for you people replies..
ok you have placed top:1250px, which is very high, so you should make it around 20-30px.
So check your style.css file and find the below code :
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
position: relative;
top: 1250px; /* cahnge here - make it 20px */
padding: 150px 150px 150px 150px;
}
So find the above block at style.css file and do change as mention above.
Your CSS
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
position: relative;
top: 1250px; // this is causing the white space..!!
padding: 150px 150px 150px 150px;
}
remove this top: 1250px;
and add bottom:0; for the footer
Try
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
bottom:0;
padding: 150px 150px 150px 150px;
}
or you could also give top:50px// a reasonable space
Try
#footer {
background-image: url(../images/footer_back.png);
background-repeat: no-repeat;
background-position: bottom;
overflow: hidden;
position: relative;
top: 50px;
padding: 150px 150px 150px 150px;
}
You have stated top: 1250px; to the footer, that's why it's going down.
Remove the top in here:
#footer {
background-image: url("../images/footer_back.png");
background-position: center bottom;
background-repeat: no-repeat;
overflow: hidden;
padding: 150px;
position: relative;
top: 1250px;
}
Like this:
#footer {
background-image: url("../images/footer_back.png");
background-position: center bottom;
background-repeat: no-repeat;
overflow: hidden;
padding: 150px;
position: relative;
}
Footer div is absolutely positioned 1250px down and has a top padding of 150px.
Reduce/remove these and you should be happy. Define padding with more than one value, when two values the first one is top/bottom, second is left and right. Try
padding: 20px 150px;
or adjust to taste.
P.S. This site is probably not going to look very good on tablets/mobiles - I suggest you try and get the site to look good on small displays and read articles on responsive design...
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%;
}
Hey guys I'm building my first website and I cannot figure how to get rid of the extra space on the right which brings up the horizontal scrollbar. The site is http://qtsocial.com/accounts/login/ ... If you can look at the css and give me a clue I would really appreciate it. Thanks!
body {
background: url(http://qtsocial.com/static/images/body-bkg.png) repeat scroll;
margin: 0;
padding: 0;
}
.container {
margin: 0pt auto;
width: 100%;
}
#header {
background: url(http://qtsocial.com/static/images/hdr-bkg.png);
background-repeat: repeat-x;
height: 181px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
padding: 0;
}
#logo {
background-image: url(http://qtsocial.com/static/images/QTlogo.png);
background-repeat: no-repeat;
height: 88px;
position: absolute;
top: 40px;
left: 25px;
width: 100%;
}
#navigation{
height:40px;
z-index: -1;
}
You have the DIV with id of logo set to 100% width (which is setting it to the page width) then you're indenting it by 25px. Change the width of #logo on line 25 of login.css to be the width of the background image you're using (299px).
Logo is too wide
Inside #logo Change width: 100%; to width: 299px; (the actual width of the image)
Your logo div is whats causing it.
It is 100% of the width, but this does not include the 25px of the left of it, thus it is overflowing 25px to the right of your window.
Change the width of the logo div to the width of your logo image, and it won't overflow to the right.