I created a responsive box for my site (http://www.to-hawaii.com/trees) and it works fine except one thing. See here http://www.to-hawaii.com/page.jpg on the left and right side of the title there is a gap and I cant figure out how to fix. I figured the problem comes from line style.css 525
.images_tabbox {
max-width: 495px;
width: 100%;
float: left;
background: transparent url("/theme/images/images_tab_box_mid.jpg") repeat-y scroll center top / 100% 100%;
}
When I remove float:left; this particlar issue is fixed but then the whole box looks like this http://www.to-hawaii.com/page2.jpg
I would appreciate it if someone has any ideas how to fix this. thanks!
It's because your image(s) have a solid white background. The white on the left and right is part of the actual jpg. To fix it you have to save your image again from the source (hopefully you have access to the source design files) with a transparent background as a png or gif format. jpgs can't have transparent backgrounds.
Related
I have been googling this for hours but none of the suggestions found are working.
I have a page banner which is light blue. On it I have placed a transparent png image file. The blue background does not show through, I just see the white/grey checkerboard effect where the transparency is.
It is pretty simple. I have a Div container defined in CSS and a class for the img. Here is the CSS
.header-column-small {
float: left;
width: 30%;
background-color: transparent !important;
}
.header-column-small img {
width:220px;
height: 150px;
object-fit: contain;
}
The background color is defined further up the chain in a parent div class.
And here is the HTML
<div class="header-column-small">
<img src="books-on-shelf-small.png" />
</div>
Here is how it looks
Screenshot
I have tried using background-colour: transparent in both the image class and the immediate image container (header-column-small) but no better.
Any help really appreciated
Many thanks
Mark
OK, hangs head in shame... :)
Turns out the PNG file was not a transparent background image at all. Just a warning to others that may be searching the net for images for their project. The sites that claim to be providing 'transparent' png files are not always doing so.
I should have looked for the obvious first before trying all sorts of code hacks to fix a problem that wasn't really there..
Thanks to those who replied so quickly to shine a light on my short-sightedness!
Cheers
Mark
I am starting a new webpage at draincleaningphx.com, and the eagle image on the homepage using Chrome still displays the transparent background as white. Ive tried the image saved as both png and gif file. I've read about using css to make the background transparent but can't figure it out.
Any ideas? Thanks.
The Eagle image is transparent.
If you put any other color in the CSS for the content:
#content {
float: right;
width: 640px;
margin-right: 30px;
background-color: #000;
}
for example black, you can see, the image is transparent.
If you want to add the shadow to eagle, you need edit to picture with shadow around the eagle :D
Did you just open the image in the browser or did you embed it in a HTML file / defined as background-image?
If you scroll to the bottom of this page - http://dev.socialadr.com/get/begin06 - you'll see that the white background w/ drop shadow stops near the end.
This is the image file that I want to repeat vertically:
http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif
The CSS file being used is:
http://dev.socialadr.com/_css/css.php
And I believe it's this #page_wrapper id that needs to be modified:
#page_wrapper {
width:1014px;
margin:0 auto;
padding:0;
min-height: 300px;
background: url(http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif) repeat-y center top;
height:100%;
}
I've tried tons of different things, read a bunch of other StackOverflow posts about similar issues but for the life of me I can't get it to work.
Any ideas?
Thanks!
Kane
Try placing quotes around the URL:
background: url('http://dev.socialadr.com/mod/theme_simplebluewhite/graphics/theme_contentback.gif') repeat-y center top;
Your live CSS does not include the repeat-y property given in your pasted code.
Additionally, your image file is very large. Since the image is meant to be tiled, the image height should be the height of one tiling.
You should also break the image up into two pieces and set them as backgrounds on two different elements. Tiling the current image will include the top part of the box with the corners, which is not what you want. Set the corners-only image as the background on one element, then the tile image on another element with repeat-y.
I have a png of a simple rounded rectangle I made in Photoshop. I want the entire rectangle to show, however there is a little cropping on the top right, bottom right and bottom left corners of the image that make it square. The top left corner is the only one of the 4 that maintains that rounded edge.
I saved the image in photoshop and gave a little bit of extra room on all 4 sides - saving it as 870 * 335 pixels. My CSS looks like this:
#main {
margin: 8% auto 0 auto;
width: 870px;
height: 335px;
background: url(images/form.png) 125px 87px no-repeat;
position: relative;
}
The extra space I gave it in photoshop should show the whole rectangle correct? Or am I missing something critical? Thanks!
This part doesn't make sense to me:
background: ... 125px 87px ...;
You are forcing the image to a background position that will not allow the entire thing to show, if it is the same width as its container.
Try this:
background: url(images/form.png) 0 0 no-repeat;
There is nothing wrong with using background positioning on your bg image if you're correctly using sprites. However, are you trying to move the actual container (#main) left 125px and down 87px? Using background positioning that way would not achieve what you're trying to do.
If that's the case, try using padding instead. If not, let us know. Can you provide a link to your work? Firebug is a must-have if you don't have it.
in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?
the css for this i am using is.
#header {
height: 111px;
background: url('../img/header-bg.jpg') repeat-x;
width: 100%;
}
let me know if you want more code ill host it in jsfiddle. thank you.
i have hosted my site in http://iarmar.com/test/bn just in case you want to test.
Set min-width: 1040px; to your #header
As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.
See this www.viralment.com oh its says 30 at least
try using these:
background-image: url("gradient_bg.png");
background-repeat: repeat-x;