WordPress.org

Ready to get started?Download WordPress

Forums

Picture background many sizes (22 posts)

  1. webbhelp
    Member
    Posted 4 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 4 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 4 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 4 years ago #

    somebody, please? :)

  5. Peter Boosten
    Member
    Posted 4 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 4 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 4 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 4 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 4 years ago #

    somebody that can confirme :P please :)

  10. webbhelp
    Member
    Posted 4 years ago #

    Somebody? please :)

  11. webbhelp
    Member
    Posted 4 years ago #

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

  12. webbhelp
    Member
    Posted 4 years ago #

    *BUMP*

  13. esmi
    Theme Diva & Forum Moderator
    Posted 4 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 4 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 4 years ago #

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

    Oops... sorry.

    Peter (definitely a he)

  16. webbhelp
    Member
    Posted 4 years ago #

    Hehe, impossible to now, wrote he auotmatically :P

  17. Peter Boosten
    Member
    Posted 4 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 4 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 4 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 4 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 4 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 4 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.

About this Topic