Background image fill div, text with padding

I have a div set up with a width of 182px, and the padding is T:15 R:10 B:15 L:20. The text in the div works with these parameters, but when I add my background image (a bar of color) also 182px, it does not fill the div, only about 75% of it. I'm learning as I go, so any advice would be appreciated.

gregjb wrote:
I have a div set up with a width of 182px, and the padding is T:15 R:10 B:15 L:20. The text in the div works with these parameters, but when I add my background image (a bar of color) also 182px, it does not fill the div, only about 75% of it. I'm learning as I go, so any advice would be appreciated.
Padding is added to the dimensions of the <div>. So your <div> is really 182px wide plus padding left and right 30px = 212px
So your background image needs to also be 212px wide.
HOWEVER if you do want your <div> to only be 182px wide set its width to 152px wide to take into account the padding.

Similar Messages

Full browser window placeholder that acts like background image fill?

I want to be able to set full browser window placeholder that acts like the background image fill function, but be able to then build in a multi-anchored horizontal parallax. The effect is like we have a background image fill, but can slide horizontally between pages as if they are in a slide show. Simultaneously, content inside the placeholder such as longer paragraphs of text can scroll down - on top of the image layer, but inside the borders of the image placeholder. For a clear example of this, see this website: http://argonautinc.com/
I've read and searched but to no avail. I'm only about one week into Muse, so please forgive me if this is super simple! Thanks, Nico

Hi Nico_Cineaste,
You can achieve the design by using Fullscreen Slideshow in MUSE as object.
Open any page in MUSE , click on the "Object" >> Slideshow >> Fullscreen.
Click on your blank web page.
This will give you a full screen slideshow.
You can now design as per your requirement.
Thanks
Prabhakar Kumar

How is it possible to adjust the background images and the text in Mail?

How is it possible to adjust the background images and the text in Mail?

Here's the solution I used to solve the same problem. If you're not comfortable editing the source files, this might be more than you want to take on--but I've done it to several files with no ill effects. You can follow the instructions on this page and the referenced original post from (he includes a link on the page). Good luck! He's got some great tips on some of his other pages.
http://photo.rwboyer.com/2010/03/15/aperture-3-book-theme-trick/
A warning about editing the Master pages--it only edits them in that book--it doesn't update the theme. So if you go to create another book with those same layouts, you'll have to duplicate the book and replace all the images. An alternative would be to create a "clean" book with no photos in it and then just use that as a starting point each time.

Fix background image within div

Hello
I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far.
I'm trying to make the background image within a div to be fixed when i scroll vertically.
Have a template made, in which the only editable div is the rightdiv. (in red, to be easier)
Here's my code
CSS
body {
margin-top: 0px;
margin-bottom: 0px;
background-position: center center;
background-image: url(../Images/bgdr.jpg);
background-repeat: no-repeat;
#wrapper {
height: 875px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
#header {
background-repeat: no-repeat;
clear: none;
float: none;
height: 214px;
width: 1000px;
background-image: none;
position: relative;
padding-top: 10px;
#leftDiv {
clear: none;
float: left;
height: 500px;
width: 245px;
position: relative;
text-decoration: none;
#rightDiv {
clear: none;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;
#footer {
height: 100px;
width: 1000px;
clear: both;
position: relative;
padding-bottom: 20px;
And here is my HTML

<div id="rightDiv" style="background-image: url(Images/informacao.png)">
</div>

Well, thing is that on Internet Explorer 9, the background image will repeat vertically when i scroll vertically. On Chrome it will stay fixed on scroll (and that is what i want).
I tried adding style="background-attachment:fixed" , but that will make the image align fix itself relatively to the whole page, not the div only. Also, it repeats itself 4 times to oocupy the screen. I can solve that by "no-repeat", but it still is fixed to the browser page, not the div.
I've been trying to fix this for days.. Help would be much appreciated.
Funny thing is that this only happens in IE9.. Chrome works perfectly.

DevilUrd wrote:
Didn't work. sorry, but i don't think i understood ur reply quite well..
Here's what i used:

<div id="rightDiv" background: url('Images/informacao.png') no repeat fixed;>
<tr>
<td>textextextextextextextextext</td>
</tr>

Could u pls be a little more detailed?
sorry, but i'm still very unexperienced at this..
That is not a valid way to write css into your page and will not work. You appear to be trying to use the background shorthand css property within the html tag itself. If you want to use an inline style, it would need to be within the style html attribute...
<div id="rightDiv" style="background:url(Images/informacao.png") no-repeat fixed top left;">
But it would be better to place it in your css instead...
#rightDiv {
clear: none;
background:url(Images/informacao.png") no-repeat fixed top left;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;

Can a script be written to take the next 2 files in a folder and place them on a background image..then saving with the first images filename..?

Hello all, I hope you can help.
In Photoshop I have a problem to overcome and have delved into the world of scripting..
If there is a quick way to produce the following could someone help me with some pointers?
Here is my situation..
I need to produce a photograph proof card, these are for a double image option so cause me a headache compared to just creating an action..
This proof card really is just a set of two different photographs placed onto a background image.
I would produce two different images of the same person and name them exactly the same except they are suffixed with an A or B to keep them together, these would be in a folder with approx 500 other images for example (250 x two of each person)
My preference for the process would be done in the following sequence:
1/ Open the background file jpg (which is sized at 2400 x 1800 pixels @ 300dpi)
2/ Load the first image from the batch file and place this.
3/ Get the filename of the first image and create it as a text layer and write it below the image at 10 point text size.
4/ Create another copy of this layer and change the font to 3of9barcode font, however the font needs an asterisk before the text then again after it. e.g. *filenameA*
Only the first image has the need for a barcode as they are for the same person. This is at 18 point.
5/ Load the next sequential image from the batch file and place this.
6/ Get the filename for the second image and as Item 3/ create a text layer below at 10 point text size.
7/ Place a png overlay with my copyright information over the images (I need to do this twice, once for each image)
8/ Flatten the images and save the file in a new folder with the same filename as the first image.
I can do this in Lightroom with the exception of putting the barcoded text, and the filenaming, this is because the background image is used as the identity plate and the filename is not based on the data from either photograph..
Can anyone shed some light on where to go from here?
Kind regards
Bryan

Photoshop Scripting-wise this seems fairly "easy".
But I would recommend creating a template file (that already combines background image, png overlay and the Type Layers).
Maybe data driven graphics would also be an option …
Photoshop Help | Creating data-driven graphics

div drop shadow hidden behind background image of div below

I am trying to show the <div navigation> drop shadow on top of the <div mainImage> background image. How can I fix the css to show it on top of the bar picture? Here is the site in progress... http://cishenanigans.com/index2012.html
Thanks!

You should use z-index. But this works only on absolute or relative positioned elements.
In your case, replace this:
#mainImage {
margin: 0px;
padding: 0px;
height: 300px;
width: 1020px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/mainImage.jpg);
to this:
#mainImage {
margin: 0px;
padding: 0px;
height: 300px;
width: 1020px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/mainImage.jpg);
position: relative;
z-index: -10;
That should do the trick

Background image to be flush with the top of the browser window.

I have a background image that I have centered but I would also like it to be flush to the top.
margin: 0px;
padding: 0px;
body{
background: #4992b2 url(images/blue.jpg);
font: 14px Arial, Helvetica, sans-serif;
color: #464646;
margin: 0 auto;
padding: 0px;
background-repeat:no-repeat;
background-position:center;
This is part of my css..is there something I am missing?

body {
background: #4992b2 url(images/blue.jpg); top center no-repeat;
font: 14px Arial, Helvetica, sans-serif;
color: #464646;
margin: 0 auto;
padding: 0px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Where does apple put the background image fills for each theme on the HD?

Any help with answering this question would be greatly appreciated!

Welcome to the discussions, tk_mac.
They appear to be inside the Keynote application. At this point, I always say make a backup copy of your application before going inside the package (in case something goes wrong).
Now, right click (or control-click) on the Keynote application, and choose "Show Package Contents". Then, double-click on
Contents,
Resources,
Themes, and finally
Shared.
The images you find in that folder are all the ones used by all the Keynote themes (including images used for placeholders). You can copy those out of that folder into another folder so that they're easier to get to, OR you can import all of them into iPhoto (name the album "Keynote Assets") so that they're available from the media browser whenever you need them.

Imported image comes small and with a low resolution when trying to fill text

I am trying to fill my text with a texture or image.
Heres my process:
I type my text, select it and click on the "draw inside" button.
I then go to place and select my image.
The image comes tiny with dimensions of x- 430mm and y-340mm.
Obviously when i stretch it out to cover the text, the image becomes blurry.
Whats happening here?
Thanks

herms,
What happens if you start with (File>Place) the image/texture, then have the live/outlined Type on top, select both and Object>Clipping Mask>Make (if you have outlined Type, select all of it and Object>Compound Path>Make first)?

Fitting background image size according to link text

I am using a list for my navigation. I have a background
image which is shown on the LI. If the text in the link is longer
than the width of the image then the background image is repeated.
How can I stretch the width of the image?
Does it look like I am putting the background image in the
right place? Am I doing this right? Thanks a lot
<style type="text/css">
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small;
PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px;
FONT-FAMILY: "Trebuchet MS", arial, helvetica, sans-serif;
BACKGROUND-COLOR: #fff; TEXT-ALIGN: center; min-width: 740px
#navbar {CLEAR: both; MARGIN: 0px; WIDTH: 760px;
bgColor=#cccccc
#navbar LI {
background-image: url(britishalliance/navback.gif);
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
#navbar UL {
LIST-STYLE-TYPE: none;
#navbar A:link {
background-image: url(britishalliance/navback.gif);
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px;
PADDING-LEFT: 6px; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM:
5px; COLOR: black; LINE-HEIGHT: 10px; PADDING-TOP: 5px;
WHITE-SPACE: nowrap; TEXT-DECORATION: none
</style>
<DIV id=navbar>
<UL><LI><A href="">aaaaaa aaaa
aaaaaaaaaa</A>
<LI><A href="">aaaaa aa aa aaaaaaaa</A>
<LI><A href="">aaaaa aa aaaaaaaa</A>
<LI><A href="">aaaaaaaaa</A>
<LI><A href="">aaaaaaaaaaaaa aaaaaaaaa</A>
<LI><A href="">aaaaaa aa</A></LI>
</UL></DIV>

> How can I stretch the width of the image?
You cannot. But you can prevent it from tiling with CSS.
> Does it look like I am putting the background image in
the right place?
It's not necessary to have it on both the <a> and the
<li> tags.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Hydrowizard" <[email protected]> wrote in
message
news:[email protected]...
>I am using a list for my navigation. I have a background
image which is
>shown
> on the LI. If the text in the link is longer than the
width of the image
> then
> the background image is repeated. How can I stretch the
width of the
> image?
> Does it look like I am putting the background image in
the right place? Am
> I
> doing this right? Thanks a lot
>
> <style type="text/css">
> BODY {
> PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: small;
PADDING-BOTTOM:
> 0px;
> MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY:
"Trebuchet MS",
> arial,
> helvetica, sans-serif; BACKGROUND-COLOR: #fff;
TEXT-ALIGN: center;
> min-width:
> 740px
> }
> #navbar {CLEAR: both; MARGIN: 0px; WIDTH: 760px;
bgColor=#cccccc
> }
> #navbar LI {
> background-image: url(britishalliance/navback.gif);
> PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px;
PADDING-BOTTOM:
> 0px;
> MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
> }
> #navbar UL {
> LIST-STYLE-TYPE: none;
> }
> #navbar A:link {
> background-image: url(britishalliance/navback.gif);
> BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px;
PADDING-LEFT: 6px;
> FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px;
COLOR: black;
> LINE-HEIGHT:
> 10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap;
TEXT-DECORATION: none
> }
> </style>
>
>
> <DIV id=navbar>
> <UL><LI><A href="">aaaaaa aaaa
aaaaaaaaaa</A>
> <LI><A href="">aaaaa aa aa
aaaaaaaa</A>
> <LI><A href="">aaaaa aa aaaaaaaa</A>
> <LI><A href="">aaaaaaaaa</A>
> <LI><A href="">aaaaaaaaaaaaa
aaaaaaaaa</A>
> <LI><A href="">aaaaaa
aa</A></LI>
> </UL></DIV>
>

Background image in a div?

I know how to use css to place a background image inside a
div. However, I would like that image to be contextual, and be
differrent depending what the current page is. As an hypothetical
example, I would like a non-repeating background image of an apple
inside <div class="content"> when the page apples.html is
open, but then an image of a banana would be the background image
inside <div class="content"> for bananas.html.
If there is a way to place background images on the fly,
directly in the html, that would be the better solution for this
novice.
Thanks for any help!
r

Do it this way -
<style type="text/css">
div.content { background-repeat:no-repeat; }
#apples div.content {
background-image:url(/images/apple.jpg); }
#banana div.content {
background-image:url(/images/banana.jpg); }
</style>
(put this in the head of each page (or put the rules into a
site-wide
external stylesheet)
Now, on the apples page, change this -
<body>
to this -
<body id="apples">
and on the bananas page, change it to this -
<body id="bananas">
Get it?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Sbisa" <[email protected]> wrote in message
news:ffqvhs$5q6$[email protected]..
> Thank you!
>
> I will give it a try. I am googling for tutorials on
this, but if anyone
> has one in their pocket that they could share, much
appreciated.
>
> r

Is there a way I can add be background image to my sharepoint site with look and feel?

Whenever i add any background image with "look and feel" it stretches the image. I've tried modifying the CSS file (in body and tried .ms-backgroundImage setting "background-size:inherit !important;") to fix it, but it doesn't seem to
have any effect. I there anyway i can add a background image to the master html or css code and get it to not stretch?
Thanks
James T.F

Hi,
According to your post, my understanding is that you wanted to add background image to sharepoint site with look and feel.
We can define the Image Url in the Composed looks (Site Settings > Web Designer Galleries > Composed looks) to add background.
However, the image will be stretched to fill the viewport at 100%.
Though we can override the CSS attributes which would allow the image to repeat, but instead I recommend to go the no CSS route and switched the background to a much larger one that would fill the viewport nicely without looking pixelated.
More information:
SharePoint 2013 Branding: A New Approach
SharePoint 2013's Branding – My first three lessons
Best Regards,
Linda Li
Linda Li
TechNet Community Support

How do you make a rectangle resize with background image?

I'm trying to add links (transparent rectangles) to a background image that is set with "scale to fit". However when it scales in needs to scale with my links. Can I have the rectangles scale with the background image? If not is there a better way of doing this?

As I understand. correctly. You want the rectangles that you have added over background image, (to which links are added) to be responsive in layout within the project, Am I correct ? If yes ! Muse does not implement "Responsive Layout" as defined by a hand coder. For more details refer to : Can you create responsive sites with Adobe Muse?

Resizing 1) background images and 2) div's containing images

I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.

Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
     <img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
     .image img {display:none;}
     .image {
          background:url("YourImage_Mobile.jpg") no-repeat 0 0;
          background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
     .desktop {display:none;}
     .mobile {display:block;}

Size and rotate a background image

I would like to have a background image that rotates different images when the page is refreshed and sizes with my page. I believe I have a handle on the sizing part but I can't figure out how to make the images rotate. I would like the images to go in a particular order instead of random if that's possible.
This is what I have so far:
<head>
<title>Stretched Background Image</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%;;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#navbar {position:relative; z-index:1; padding:10px;}
#content {position:relative; z-index:2; padding:10px;}
</style>


</head>
<body>
<div id="page-background"><img src="stretchPix2.jpg" width="100%" alt="Smile"></div>
<div id="navbar">
<h2><img src="TestNavArt.gif" width="900" height="30"></h2>
</div>
<div id="content"><font color="#FFFFFF"> more test here?</font></div>
</body>
</html>
If anyone can give me some insight into making the background image rotate I would greatly appreciate it.
Thanks,
Dave

Hi
The only reliable way to rotate a background image is using css3 but as this feature is only implemented in 1 browser, (and that is in beta)? There are a few javascript frameworks that claim to do this, but in testing I have not found one that is even 50% reliable.
PZ

Background image fill div, text with padding

Similar Messages

Maybe you are looking for