WordPress.org

1. webbhelp
   Member
   Posted 2 years ago #

   Hi!

   I want to add a background behind all of my images.

   But there is different image sizes.

   First I thought I could add backgorund-image to the img tag in CSS, but if there are more than one size, I got problem.

   My second thought was to add a pictur with different sizes to all pciture size.

   How can I do to add a background-image and deside which size of the picture I will use I would use (in CSS)

   Thanks :)

2. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   You'd need to use CSS and an image that tiles seamlessly. Then something like:

   .post img {
   background:url(images/mybg.jpg);
   padding:10px;
   }

   should work.

3. webbhelp
   Member
   Posted 2 years ago #

   Hi!

   Thanks for answering!

   But I mean if I got this sizes:

   150*300

   300*450

   250*300

   How can I decide which img-tag who get the CSS class for size: 150*300, 300*450 and 250*300.

   Because there is a several of image sizes...

   Thanks :)

4. webbhelp
   Member
   Posted 2 years ago #

   somebody, please? :)

5. Peter Boosten
   Member
   Posted 2 years ago #

   I think you missed esmi's advice:

   and an image that tiles seamlessly

   What kind of background are you thinking of?

   Peter

6. webbhelp
   Member
   Posted 2 years ago #

   It is a background with innershadow in all corners.

   I don' understand what Esmi means, it's the english :P

   Thanks :)

7. Peter Boosten
   Member
   Posted 2 years ago #

   I don' understand what Esmi means, it's the english :P

   His or yours? ;-)

   Anyway, I think you have to revert to special techniques involving jQuery for such special purposes.

   Peter

8. webbhelp
   Member
   Posted 2 years ago #

   Hehe, it is mine, but I didn't understand his because I can't they words :P

   So, I need to check with javascript and then add a class with javascript that adds the right image for the picture size...

9. webbhelp
   Member
   Posted 2 years ago #

   somebody that can confirme :P please :)

10. webbhelp
    Member
    Posted 2 years ago #

    Somebody? please :)

11. webbhelp
    Member
    Posted 2 years ago #

    please, It is hurry, sorry for "spam posting" but I need help quick :)

12. webbhelp
    Member
    Posted 2 years ago #

    *BUMP*

13. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    Please don't bump!

    You can't use 3 different images as a single element background for an image in one CSS class. You'd need a number of nested (and possibly) floated divs to pull off what I think you're trying to do.

    And I'm a "she, btw. :-)

14. webbhelp
    Member
    Posted 2 years ago #

    Hi, sorry hehe!

    I don't understand to 100% now :P

    Say I got 5 images, in different sizes, how can I give the pictures different backgrounds dependence on the image size?

    Thanks :)

15. Peter Boosten
    Member
    Posted 2 years ago #

    And I'm a "she, btw. :-)

    Oops... sorry.

    Peter (definitely a he)

16. webbhelp
    Member
    Posted 2 years ago #

    Hehe, impossible to now, wrote he auotmatically :P

17. Peter Boosten
    Member
    Posted 2 years ago #

    @webbhelp

    To answer your question: if you want different backgrounds for various image sizes, you have to either:

    • give every image size a different class, so you can style them differently in your stylesheet (=giving them different backgrounds)
    • embed your image in 4 divs, to specify the corner images of your frame, and fill the rest with some repeating image. This is a popular technique for creating boxes with rounded corners

    Anything else will be very difficult to implement, if you're not familiar with the stuff.

    Peter

18. webbhelp
    Member
    Posted 2 years ago #

    Exactly what I want to do.

    But to do it, is the hardest thing I think is:

    How to add a class to the image different sizes... I very new to WP but I'm good at CSS...

    So... how can I add a class for the different image with different sizes...?

    I cant add corners because I need to add ID/classes before and after the IMG tag then...

    Please I really need to get this work :)

19. Peter Boosten
    Member
    Posted 2 years ago #

    I think I found something for you: this article.

    Just one question: why don't you resize all images to a specific size and put your border around that one size?

    Peter

20. webbhelp
    Member
    Posted 2 years ago #

    Because the blogg is already "running" so... the image that already have been added...

    That was bad english I think...

    I mean, the author that has write blogposts already, have also add picture, how can I resize them (to good quality)

    Either I like that idea to only use one IMG size... but isn't that to late, or?

21. Peter Boosten
    Member
    Posted 2 years ago #

    how can I resize them (to good quality)

    in your css:

    img {
      height: auto;
      width: 400px;
    }

    assuming the images all have the same ratio. If not, you could alter the height parameter to a specific amount of pixels, however you will find the images with a different ratio look distorted.

    Peter

22. webbhelp
    Member
    Posted 2 years ago #

    Ok, Thanks!

    That's a good solution, sad to say that the quality cant' be 100%

    But. it's a good solution...

    If I want perfect quality I need to use JavaScript to add classes for each image with different sizes...

    Thanks a lot for replying :)

Topic Closed

This topic has been closed to new replies.