Thanks for any help. I'm fairly new to web developing and I've run into a strange issue on my site. http://bit.ly/1nnzqeB
The image that seems to be BEHIND it should be scaling to fit in the section, rather than what it's doing now. I've been stumped on this for hours and I feel that it's probably something stupid simple so I'm reaching out to the experts. Please help!
Well, im guessing you want this image to scale and fit the entire horizontal white space.
http://codesilver.us/wp-content/themes/SVG/img/slide1-1.jpg
After looking at your code, your .container needs to be 100% width
.container {
width: 100%;
}
After i applied this fix it appears to work, you may want to clean up your div structure a bit overall, but that's a different conversation.
UPDATE:
For re sizing you can use the css cover property for background-size: cover; this make sure the image covers the entire div and vertically and horizontally aligns the picture as well.
newheader {
/* background-size: 100px 100px; */
background: url("../img/slide1-1.jpg") no-repeat scroll center center;
margin-top: 5%;
/*background-size*/
-moz-background-size:cover;
background-size:cover;
}
Assuming this is actually how you want it to look, do two things:
Remove the background-size: 100px 100px; from the .newheader class
Add width: 100%; to the same class
Related
I am developing a website over at http://notice.byethost12.com . I have finished most of the work but I am getting problems in making any logo appear resize to fit in the grid for them. So are tall while some are wide. and if not most are just stretch. I am pretty new with this. So I'd be glad if you could help.
Well, since you're using a background image in your thumbnail-image class, you'll need to specify background-size and background-repeat rules.
Add this to your css:
.thumbnail-image {
background-size: 100%;
background-repeat: no-repeat;
}
Hope that helps.
I while ago while making a site, I didn't set a height for a div section and filled it with content. Then I set the background-image to an image, and the image/div stretches to wrap the content since there is no height. I have been trying to replicate it but every time I do the same thing, the background image disappears but the content is still there (white text, can't see unless selected). This happens when I set it like:
#main{
background-image: url("images/pizza-dark.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
clear: both;
}
I know there is a way to do this but I'm not quite sure. This is crucial to the site because I am using bootstrap columns and a set height won't give a good result on mobile. In the JSFiddle below, there is no set height and, as you can see, the background image doesnt show at all. Even if you set it to 100%, the content that folds down (coloumns from Bootstrap) wont show since the background image doesnt stretch that far.. I have tried height:auto too and that doesn't work either.
Here is a JS Fiddle:
https://jsfiddle.net/du53n862/
Thanks!
You forgot to add float property to main container. You can use vh units for the main container height, and it will fits to every screen size:
#main {
background-image: url("http://itspizzatime.ca/wp- content/uploads/2015/09/4791207-9790062099-Pizza1.jpg");
background-repeat: no-repeat;
background-size: cover;
float: left;
width: 100%;
height: 100vh;
}
Here is a fiddle: fiddle link
I'm not sure if this is the behavior you want, but if you add a height of 100% and a scrolling overflow to your main div, the image will just be a fixed full-cover image in the background. This seems to be working fine in this fiddle.
#main {
height: 100%;
overflow: scroll;
...
}
This issue can easily be solved with flexbox. If you can drop support of older browsers here is the simple solution https://jsfiddle.net/1p1k41ot/.
I just added few lines in #main
#main {
...
display: flex;
flex: 1 1;
height: 100%;
}
I am having trouble keeping a consistent Background image height on a div across multiple devices, I am using Chrome's DevTools to preview the outcome on different devices based on their width. Let me explain further.
I have a div with the following class...
.header-image {
width: 100%;
height: 57%;
background: url('img/fruit-water.jpg') lightgrey;
background-size: 100%;
display: block;
}
This displays perfectly fine on the normal computer viewport, the height: 57%; property displays the perfect amount of the background image that I need. But when I change the view onto another device it doesn't display the same amount of the image that it initially did, it only shows about 20% of the image.
Does anyone know a way to keep the amount of the image displayed consistent, even with the width value changing?
I can't use Jquery or any plugins as the page is an AMP page and validates according to the AMP rules set by google.
https://jsfiddle.net/pre6L7d9/1 <-- Fiddle, Please look into it
Thanks in advance.
as #severinolorillajr said you can use:
background-size:cover;
and if you want to center it to the top you can use:
background-size: cover;
background-position:50% 0%;
EDIT:
Sorry i cannot answer the other question,
if you want to use a % height like 57% you need to set the image position:absolute;
Or you can use:
height:57vh;
That will do the trick!
EDIT2:
maybe you need to mantain the image scale, then you need to set it to:
height:57vw;
.header-image {
background: url('img/fruit-water.jpg') no-repeat center center fixed;
background-size: cover;
}
Check this for other CSS Implementation
I have a problem with my body selector. When I make my windows smaller it doesn't keep the body width at 100%, and I don't have any clue why.
body
{
margin:0px !important;
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;
width:100%;
height:100%;
}
This is generating a footer bug when I make the window smaller because the body is not on the whole width.
I can't add pics to show because I don't have 10 rep, but you can check at this link and make the windows smaller:
http://websoftit.ro/lackoflove/about.php?active=1
i dont want my website to be responsive i just want my body to be 100% on any resolution. here are the links of pics and problem i have when i make the window smaller: i.imgur.com/70sj43G.png i.imgur.com/OgMZVxa.png
You have widths set inside the body. For example your navigation has a width of 1060px as does your main_bg div.
The problem is actually caused by div#banner, which has the following style:
#banner {
position: absolute;
width: 150px;
margin-top: 5px;
margin-left: 1040px;
}
Margin set to 1040px together with width: 150px causes your banner to have overall width of 1190px, that is wider than the rest of site.
I assume you've used position: absolute on your banner to avoid this problem, but this is not enough to make it work like you want.
You can read more about solution to this issue here.
Note:
The above solves your problem, but won't help making your site responsive.
If responsive design is your goal (you didn't say this, I'm just guessing that maybe it is), I'd recommend looking at some tutorials to get the basic rules etc.
There also are responsive frameworks like Bootstrap or Zurb Foundation that help making responsive websites.
The child divs are not set to fluid widths. If you change the CSS "width" to "max-width" you'll get a chance to see how the layout changes at different screen widths. There will definitely be further updates needed to your CSS, but this will get you started.
document.onresize = function() {
document.body.style.width = document.body.scrollWidth+"px";
}
This can help you, when the document is resized, this callback reset body width to 100% of document's width.
I was looking at path.com today and liked their implementation of a dynamically sized cover photo. If you check it out you will see that it sizes nicely no matter your screen size.
I looked a little more into it and noticed the background image is attached to the body tag. I also noticed the body appears to get its size from the form element inside it, meaning the body itself it actually shorter than the total page.
Does anyone know how they accomplish this?
Also, the body height is set to 100% of the viewport.
I think you're looking for this part:
body.home {
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}