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.
Related
EDIT: solved! Check the comments, cheers Dev!
On my website's homepage I want to insert a background image that fits the full screen width. I'm using WordPress and Elementor to do this.
I've tried many setups but I'm unable to fill the full screen width, while keeping the correct image height so the ratios stay correct.
A part of the right side of the image was cut off.
Code I used:
<div id="kunstplein1920"></div>
#kunstplein1920 {
background: url(imageURLhere);
background-repeat: no-repeat center fixed;
background-size: cover;
min-width: 1920px;
min-height: 603px;}
Any help is appreciated! Thanks. :)
Cheers,
Joris
Did you try adding
width: 100%?
should be working
I am having an issue with trying to make a fluid HTML page. (I wanted to take into account different sized resolutions, so I'm working with background images with widths of 1920px)
So I wanted to make a couple stacked divs, each with a background that gets resized via background-size. However, I'm noticing that I can't get 100% or contain to work as the property value unless I also manually set the height of the div. I can set it manually with a set px or %, but I feel like this isn't the best way to dynamically set the height of the div.
So I'm wondering if there's a better way to set the height of the div, so it's set to be the same height as the height of the image with the background-size property, so I don't get all the white space after the image, if the div is too tall.
I've got a live example here: https://jsfiddle.net/fcb1wcth/
#header {
background-image: url('http://i.imgur.com/x5wEY56.png');
background-repeat: no-repeat;
background-size: contain;
height: 710px;
color: #ffffff;
}
For example, this first div above... Since I'm working with a smaller screen, 710px is way too tall! The background-size does its job, I just don't know how to set the height correctly, and using a property value of auto doesn't help it.
// I've never used background-size before, so maybe I'm doing this wrong, but I wanted to try and experiment with making a page that works with any resolution.
Thanks for any help!
I think that better solution is to use a fixed height in combination with background-size: cover. Like this:
#header {
background-size: cover;
height: 400px;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/fcb1wcth/2/
in this example solve this issue.
http://www.jqueryscript.net/animation/Minimal-Full-Screen-Vertical-Slider-with-jQuery-Scroll-On-Scroll.html
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
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.
This is my tumblr blog:
thestorywithnoending.tumblr.com
the code for the blog is a theme I got here:
http://themes.pouretrebelle.com/lycoris/?download
(just scroll down a bit, the whole code is there)
I want the background image to just be ONE image...
I know I'm not being descriptive enough, so to fruther explain: I want it to be like this:
http://chloescheffe.com/
you see how on that website the background image is.... everything basically. And when you change the size of the webpage, the background image changes accordingly?
how can I do that on my tumblr blog?
THANKS :)
with css. set the height and width of your bg image to 100%. sorry, i'd give you the code but this keyboard doesn't have all the characters of a larger one.
use the background-size css property w3schools.com/cssref/css3_pr_background-size.asp
You can do this two ways using background-size. One will stretch the image and one will fill the width properly, but cut off the bottom.
For stretch, add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: 100% 100%;
}
For width-fill (this looks better with your current blog), add this to your body CSS:
body {
background-repeat: no-repeat;
background-size: cover;
}