0

Hey guys i have a HTML/CSS related question here...

I'm developing on a salesforce application, which makes me use this apex tag to put images in and I'm not really comfortable with using them. I am making print layouts at the moment for some forms that i've created. Everything worked fine until i had 2 images that i needed to style differently. I have 1 image in the header and 1 image that is a box within the form. Since i am styling the image in the header with some padding and centering among other stuff...the other box image wont show up as i go to print. So i was wondering if i can just separate the header image via a div tag. Here is what i have so far....

HTML:

<div class="logo_print"></div>

CSS:

 .logo_print{
    float:left;
    padding-left: 40px;
    width: 64px;
    height: 86px;
    background-image:url('../css_images/seal2.png');
}

So this is the header image i put in a div tag...did not work but if anyone has any thoughts/solutions that would be great....been trying out a bunch of diff ways with no progress. Thanks

EDIT: So I've put new CSS in with some recommendations..so now i see it on my website but when i go to print the forms...the image does not show up :/

OH and i am using @media print to put the CSS in

jeremy
  • 433
  • 1
  • 8
  • 30

1 Answers1

1

Reason it's not working is because you haven't specified a height and width in your css.

Try This:

.logo {
  background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
  width: 209px;
  height: 52px;
}
<div class="logo"></div>

Here's a codepen of the working example.

Hope this answers your question.

Arslan Akram
  • 1,266
  • 2
  • 10
  • 20
  • ok so this worked for it coming up on my web site....but when i go to print it the image does not show up....any ideas? i updated with my new code – jeremy Mar 19 '15 at 20:41
  • you can show it in safari or chrome by using `@media print { * {-webkit-print-color-adjust:exact;} }` for other browsers, i'm afraid you'd need to use an 'img' tag in html. For further reading please check out [http://stackoverflow.com/questions/5949897/how-to-get-a-background-image-to-print-using-css](http://stackoverflow.com/questions/5949897/how-to-get-a-background-image-to-print-using-css) – Arslan Akram Mar 19 '15 at 20:51