Outlook body background no-repeat - css

I am sending an Email in HTML format geared toward outlook 2007/2010. I applied a background image to body tag but it does not work. Code as below:
<body
style="background-image: url('http://example.com/bg.jpg');
background-repeat: no-repeat;
background-position:top center;">
However if I change the "no-repeat" to "repeat-y no-repeat", it shows the background image but it repeats.
Can anyone help me with this?

I'm assuming here you don't want the background image to repeat?
Maybe you want to have a single background image for the header and then a specific background colour behind the main content area?
In this case, assuming it's not possible to have a non-repeating bg image (I'm not sure to be honest), I'd repeat-y the image and have a container below the header, the same width as your background image, with the appropriate bg colour set so it obscures the repeated bg image.
It's also worth adding the bg image to the first table container as well so that if anyone reads the message in a webmail client they'll still see the background image (many webmail clients strip away the head and body tags).
I haven't tested this but here's roughly what I'm thinking:
<body style="
padding:0;
margin:0;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">
<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:100%;
background-image:url(http:/example.com/720pxx200px_bg_image.png);
background-repeat:repeat-y no-repeat;
background-position:center top;">
<tr>
<td align="center" valign="top">
<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:720px;
height:200px;">
<tr>
<td><h1>Header Content Goes Here</h1></td>
</tr>
</table>
<table style="
border-collapse:collapse;
padding:0;
margin:0;
width:720px;
background-color:#fff;">
<tr>
<td><p>Body Content Goes Here</p></td>
</tr>
</table>
</td>
</tr>

Choose one style. repeat-y implies that it doesn't repeat in the x direction.

You can hack it with a very wide image, that is positioned in the horizontal center.
It repeats both ways (default).
This should allow you to get the visual effect you are after

Related

Aligning 3 divs with outer 2 stretching 100% in either direction?

Im wanting to align 3 divs together, but i want the left div to stretch 100% left, the right 100% right with the middle div having a fixed width.
Basically I'm trying to create a header for my website with the logo in the middle and the background seemingly stretching out forever but the logo has transparency so I can't just overlay one ontop of the other.
I have done this using tabels at the moment like below but wondered if there was a better (css) way of doing it?
The Real issue being that the background of the logo in the center of the banner needs to be transparent so i cant have any overlapping divs?
Here is my example done using the following method but would prefer to use CSS if possible?
LINK: example
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
<th scope="col"><img src="style/images/header_logo.png" width="122" height="123" alt="Header_logo"></th>
<th scope="col" style="width:50%; height:123px; background-image:url(style/images/header_bckdrp.png); background-repeat:repeat-x"></th>
</tr>
</table>
I don't know if this method will work for what you are trying to achieve, but you can horizontaly center the image and then apply a background color, so it will cover the background image. You shouldn't be using empty elements, they are semantically incorrect. It's up to you though.
Take a look at this codepen.
This should work for you:
<style type="text/css>
#left, #right{
position:absolute;
top:0px;
width:50%;
height:50px;
}
#left, #headerpattern_left, #rightsticky{
left:0px;
}
#right, #headerpattern_right, #leftsticky,{
right:0px;
}
#headerpattern_left, #headerpattern_right{
position:absolute;
background:url(pattern.png) repeat-x;
width:45%;
}
#leftsticky, #rightsticky{
position:absolute;
}
#logo{
position:relative;
width:50px;
height:50px;
margin:0px auto;
}
</style>
<body>
<div>
<div id="left">
<div id="headerpattern_left">
</div>
<div id="leftsticky>
<img src="correctly_measured_image_of_pattern_on_left_side_of_logo.jpeg" />
</div>
</div>
<div id="right">
<div id="headerpattern_right">
</div>
<div id="rightsticky>
<img src="correctly_measured_image_of_pattern_on_right_side_of_logo.jpeg" />
</div>
</div>
<div id="logo">
</div>
</div>
</body>
EDIT: new suggestion
Off the top of my head, you could create two divs within each of the left and right divs and create a jpeg of how the pattern should look 100px either side of the logo and have them stick right next to the logo, then use the same repeating background on the divs next to the jpegs.
This should work in most cases, but in a few instances it will not look perfect, such as if the webpage is viewed on a gigantic screen or zoomed out quite far. Also, I'm not sure how it will look on mobile devices.

Why an image still has a border in IE even with border set to none?

With the following code, I get a border around my background image in IE7 to IE9. Why?
<tr>
<td class="wishes">
<a class="clickable">
<img class="alreadyWished" border="0" width="19" height="16"
alt="Already Wished"/><br />
Already Wished
</a>
</td>
</tr>
<style>
.clickable
{
outline:none;
cursor:pointer;
border:none;
}
.wish
{
background-image:url(../images/wished.jpg);
background-repeat:no-repeat;
border:none;
outline:none;
}
.alreadyWished
{
background-image:url(../images/alreadyWished.jpg);
background-repeat:no-repeat;
border:none;
outline:none;
}
</style>
That's a bug in IE. The CSS specs say
8.5.3 Border style
...
none
No border; the computed border width is zero.
IE doesn't care. You need to set border-width: 0 additionally. (Or border: 0 none;) if you want to use the combined name.
That looks a bit weird to me.
Why not use different classes on .clickable and avoid having an "img" without "src".
Take a look at what I did, you might need to use a bit of JS to replace the class ".wish" with the class ".alreadyWished"
<tr>
<td class="wishes">
<a class="clickable .wish"></a>
</td>
.clickable.wish { background:url("wished.jpg") no-repeat center left; padding-left:25px; /* padding equal to your width of the background image + 10-15px */}
.clickable.alreadyWished { background:url("alreadyWished.jpg") no-repeat center left; padding-left:25px; /* padding equal to your width of the background image + 10-15px */}
In CSS, border does not accept the value of 'none'. Set it to 0. The reason is, the presence of the border property states that there is a border so it doesn't make sense to say 'none'.
Also, there is no attribute 'border' for 'img' in HTML.

Putting a div under another div's background

Not sure if this is possible, but I have a div with a "border" background. Inside this div is another div that holds the content, and I want this div to appear under the border.
Is this possible to do with CSS?
Edit: Sorry for writing it in a hurry, let me try to explain more.
The parent div uses background-image like so:
background-image: url(images/SomeImage.png)
SomeImage.png is just a custom border that appears at the top of the div.
I have a child div inside this parent div, and I want it to appear beneath SomeImage.png. Is this possible?
Do something like this:
HTML
<div id="border-bg">
<div id="content">
Your content goes here
</div>
</div>​
CSS
​#border-bg {
background:url(images/border.png) no-repeat;
z-index:100;
position:relative;
}
#border {
z-index:10;
position:relative;
}​
Make sure to add the width and height of border image.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Check this for more info about z-index
it is possiple. try changing the opacity of the parent div.
for example
$("#childdiv").css({ opacity: 1.0 });
$("#parentdiv").css({ opacity: 0.75 });
I think you want to apply inner shadow http://sublimeorange.com/css/css3-inner-shadow/ on the content div?
<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white">
this is some great text
</div>
</div>
http://jsfiddle.net/gzbVG/
I ended up putting the "background image" in another div and using negative margins. Sorry for the confusion but none of the other solutions worked for me.
Just throwing this out there...
I'm using this to put a background image behind a login screen...
<table align=center width=100% border=0 cellpadding=0 cellspacing=0 background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
<tr>
<td align=center valign=middle height="350" background="images/loginimage.png" STYLE="background-repeat: no-repeat; background-position:center">
Content Here
</td>
</tr>
</table>

How can I have floating divs to left and right?

I need to show a page with a product icon (which is usually 300x400px in dimensions) on the left side of the page and its details on right side.
I thought I'd put the description in rows of a table.I created 3 div elements- a containerdiv,an icondiv,and a detailsdiv and tried to float the icondiv to left and detailsdiv to right.I got the icondiv on left side of page,but the detailsdiv is shown below the icondiv not side by side!
Ideally the icondiv should be 25-30% in width of containerdiv and detailsdiv should take up the rest of the width.I am wondering if there is a way to do it without mentioning width in pixels.
please correct me if there is something wrong with my css
thanks
mark
<div class ="itemdetailscontainer">
<div class="itemicondiv">
<img border="0" src="${item.isbn }.png" alt="${item.isbn }.png" />
</div>
<div class="itemdetailsdiv">
<table id="itemdetailstable" width="100%">
<tr>
<td>
${item.name }
</td>
</tr>
<tr>
<td>by</td>
</tr>
<tr>
<td>${item.maker.name }</td>
</tr>
<tr>
<td>
<p>Description:</p>
<p>${item.description}</p>
</td>
</tr>
</table>
</div>
</div>
css is
div.itemdetailscontainer{
float:clear;
}
div.itemicondiv{
float:left;
}
div.itemdetailsdiv{
float:right;
}
I tried this
div.itemdetailscontainer{
width:100%;
}
div.itemicondiv{
float:left;
width:25%;
}
div.itemdetailsdiv{
float:right;
width:75%;
}
and this gets the effect..
thanks everyone for responding..Is the use of
width : 25% etc problematic? Do I need to hardcode width in pixels etc?
The overflow property was new for me..
See: http://jsfiddle.net/Uys4s/
div.itemdetailscontainer{
overflow: hidden;
background: #eee
}
div.itemicondiv{
float: left;
width: 30%;
background: #ccc
}
div.itemdetailsdiv{
overflow: hidden;
background: #aaa
}
width: 30% handles this: "Ideally the icondiv should be 25-30% in width of containerdiv"
overflow: hidden on div.itemdetailsdiv handles this: "detailsdiv should take up the rest of the width".
overflow: hidden on div.itemdetailscontainer will contain the floats in the way I think you imagine the nonexistent clear: float will. Take a look at the valid values of clear. If you desperately wanted to use clear: both to clear your floats, this is how you'd do it: http://jsfiddle.net/Uys4s/1/ - but overflow: hidden is easier.
Be sure that your container (itemdetailscontainer) has enough width to hold them side by side. Inspect with Firebug or other tool and check the width.
Also I would suggest you use div's for the itemdetailstable for consistency.
There's nothing called float:clear It should be :
float : none;
or if you're trying to clear the float it should be :
clear:both
float: clear does not exist!
I think you want this: clear: left/right/both

Headline problem when floating around image

I have a problem with headline tags when I float them around an image in compability-mode in explorer.
<img src="1.gif" style="float: left; margin-right: 10px"><h1>Some headline</h1>
The picture is like 100px high, and by default the text centers in middle, which it should, but with compability-mode on it aligns top.
How can I fix so it vertically aligns center?
/Molgan
Is there a specific need to float the H1 tag next to the image? Another alternative would be to assign the image as a background to the H1 tag, and then use css background-position and padding to position your text and image to display correctly. Can you provide your html markup or a link to the page?
h1 { background: url(/path/to/my_image) 10px 15px no-repeat; padding: 20px; }
That would put your image as the background of the H1, and position it 10px from the left and 15px from the top, for example.
Why float the image? Save yourself some time and put the image in the headline tag, and then you can use vertical align to position it.
JsFiddle solution
Works cross-browser as far as I can check.
It's not "pure CSS", but it is "IE-proof"!
<table>
<tr>
<td style="margin-right: 10px">
<img src="1.gif">
</td>
<td valign="middle">
<h1>Some headline</h1>
</td>
</tr>
</table>

Resources