Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2015
    Location
    Southern California
    Posts
    12
    Member #
    46802
    Liked
    1 times

    Positioning multiple Images using CSS.

    I created another thread and perhaps the title was confusing. I am building a Twenty Twelve Child theme on WP and am trying to position 4 PNG images in the 4 corners of my body page. Essentially I am looking to create the appearance of paperweights on each corner of the page. I have identified the class for the body which is below:

    body .site {
    padding: 0px 2.85714rem;
    margin-top: 5.42857rem;
    margin-bottom: 5.42857rem;
    box-shadow: 25px 25px 25px rgba(195, 237, 83, 0.22);
    opacity: 1.97;
    background:FFF;
    background: url("trujuice/orange.png") no-repeat right top !important;
    }

    The background line is not the way to do this correctly, as it overwrites the background I have set in Dashboard. How can I put the images in all 4 corners without interfering with the white background I want to preserve? I thought of placing images in the header and footer, then using position, z-index to place them exactly where I want them, but don't have a clear understanding of how I can practically apply this. Here is an image of the look i'm going for:

    example.jpg

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Im not sure if it will work in WP but the easiest way i can think of is Flexbox. The little work i did with it i can vaguely remember this being really easy to do.

    If not you will need to use CSS Positioning attribute Setting something to be relative and the images as absolute.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks

  4. #3
    Junior Member
    Join Date
    Mar 2015
    Location
    Southern California
    Posts
    12
    Member #
    46802
    Liked
    1 times
    Quote Originally Posted by Vapr_Arts View Post
    Im not sure if it will work in WP but the easiest way i can think of is Flexbox. The little work i did with it i can vaguely remember this being really easy to do.

    If not you will need to use CSS Positioning attribute Setting something to be relative and the images as absolute.


    Regretfully sent from my iPhone using Tapatalk during lunch and other breaks
    Thank You Vapr_Arts, I will look in to Flexbox. If I'm not able to make it work using that, would you be kind enough to send me a PM with the Steps/Instructions for CSS position. I get what you're saying but don't know what I would set as relative.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

how to position multiple images in css

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com