Why is there white space to the right of my image?
HTML file:
...
<body>
<div class="image">
<img src="image.jpg" alt="Picture here" id="image" align="middle"></img>
</div>
</body>
Here's what it looks like:
The image should just be the giraffe. Where is this white space coming from?
Not sure if you want the image full width or if the white bg color bothers you...
Make sure your image div has a blue background
.image {
background-color: #4099FF;
}
or the parent that wraps your content and image. in this case your body
body {
background-color: #4099FF;
}
Its because your not filling the whole page your image is to small and you div is not full width
div{
width: 100%; // full width
}
img{
height: auto;
width: 100%
}
this will stretch to fill the whitespace
Depends on what you are trying to do, if you want the image to stretch the full width, you could set width:100%, but this would likely result in a very badely pixelated image and I dont recommend this
You may be better placing the image in a full width div, setting that div,s background color to blue and centering the image, or positioning it where you want it to be
Related
I'm using an image from Amazon directly on my website, so I can't manually trim it in an image editing program.
Around the image is lots of white space, which is annoying because under this image, there is text. And this makes the gap between the image and the text under it really big (because of said white space at the bottom of the image).
Also, every image contains a different amount of white space, so I can't just set a fixed negative margin-bottom.
I know that mix-blend-mode: multiply; makes the white space transparent, but the gap is still there because the white (now transparent part) still takes up space in the layout.
How do I make the white part go away so other html elements can use that space?
Here's a codepen: https://codepen.io/AlessioG/pen/VweqMEg
You can use the object-fit css property to crop the image.
Set the container div to the cropped size that you want the image to be, and set the image to that same width and height, then use object-fit on the image.
<div id="crop-container">
<img id="crop-image">
</div>
#crop-container {
width:200px;
height:200px;
}
#crop-image {
object-fit:cover;
width:200px;
height:200px;
}
Just use object-fit and then assign a higher number to width than height in proportion. Please dont use element names like div p or id names etc. Since it is pretty hard to overwrite that.
.image {
margin: 0;
object-fit: cover;
width: 250px;
height: 200px;
}
.header-two {
margin: 10px;
font-weight: bold;
display: block;
font-size: 20px;
}
<div class="container">
<img class="image" src="https://i.imgur.com/l2QrzBg.jpg">
<h2 class="header-two">This is a text</h1>
</div>
If you have a CSS you can assign the img a display block.
I've finally found a solution, go to https://www.iloveimg.com/crop-image, upload your image and crop the whitespace, or use imagemagick to crop the whitespace automatically
I'm creating a theme from scratch. My body has a white background and I want a div within the body to have a grey background-so that a small area of the body will have a different color (grey) background.
I've changed my div's background-color to grey but I can't get rid of the white margins on either side. Probably because my div.container has a max-width: 960px;. How do I get this grey div to go full browser width, with no white on either side, but still keep the body's content/text at 960px?
Add an outer div before your div.container
<div class="outer-div">
<div class="container">
</div>
</div>
In your css
.outer-div {
background-color: grey;
}
Look in the css for the body tag, where it is more than likely has width: 960px;, so changing the body background will not change the full width background.
So to change the full width background you will need to change the html tag's css.
html
{
background: #yourcolor;
}
I am wondering how to accomplish this logo background found here
if you notice the logo floated to the left and how the white "D" is on a red color background that fills the entire height of the header. I know how to float it and everything, I just need to know how to make a background color with a certain width to fill the entire height of the header like so. And by the way I am assuming that there is no set height already for the header.
Thanks in advance!
Whatever id or class your floated div is for the logo, simply apply a background color to that in CSS.
If you're looking for some sort of dynamic height application; set the html, body, and enclosing div elements to all have 'height:100%'.
Posting a sample of your code would help.
You may want to try something like this (fiddle here):
HTML:
<div id="Header">
<img id="Logo" src="http://goo.gl/uDkk1X" />
</div>
CSS:
#Header {
width: 600px;
height: 60px;
background: #333333;
}
#Logo {
width: 60px;
height: 60px;
float: left;
background: #666666;
}
As you can see, the image already has transparency, so any background color set to this block would render behind the actual image. Either that or put your img inside another container with a specified background color.
So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.
Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/
I have a background-image that I want on the top of my page, this image is width 800px and height 400px.
Under this image I want another background-image which will repeat vertical (repeat-y) for the rest of the page.
I have tried the following
<div id="bg-static">
<div id="bg-repeat-y">
<div>
Text goes here
</div>
</div>
</div>
The thing is that I want "The text goes here" to float over both element. (See picture, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)
What should I do to do this?
You are making this seem too complicated, but it's extremely easy.
This is what you need to do:
Your "infinite, repeated" image will go as a site background, like this:
body{ background: url("your-repeated-image.png"); }
Next, create a html like this:
<body>
<div id="container">
any content, text, whatever goes here
</div>
</body>
And just put your 800x400px image there like this:
#container{ width: 800px; background: url("your-top-image.png") no-repeat; }
While testing it, temporarily use this:
#container{ height: 600px; } /* erase after the content is ready */
I think the solution would be the other way around: have the repeating background on the outside div and the fixed height background on the inside div.
Some code on jsfiddle: http://jsfiddle.net/EBK4C/