CODEWITHSUNDEEP
htmlcssimageheader
jeremy
jeremy

Reputation: 433

Using div class to contain an image using CSS

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

Upvotes: 0

Views: 364

Answers (1)

Arslan Akram
Arslan Akram

Reputation: 1506

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.

Upvotes: 1

Related Questions