I need to use CSS to enlarge the photos seen on my homepage

  • Unknown's avatar
    jessicawhalenphotography · Member ·

    https://searbuffalo.wordpress.com/

    I would like to enlarge these photos, for instance, the top one next to “About Us” to scroll across the screen further, as seen here:

    http://rpmrestaurants.com/rpmsteak/chicago/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi there,

    You could set the image to be a background-image on that section of your home page using the following custom CSS:

    .home .featured-page-one {
    background-image: url(https://searbuffalo.files.wordpress.com/2016/04/dsc_0248.jpg);
    background-position: 50% 50%;
}

    You can adjust the values of background-position in the above snippet in order to experiment with different positioning. The first value represents the horizontal position of the image and the second the vertical.

    You would need to use similar CSS in order to set the background image for other sections of your home page. I’d be happy to help with that, as it comes up.

    Alternatively, you may wish to have a browse through our theme repository for themes that prominently feature images on their home page by default. Pique is an example of a theme that displays featured images on each section of its home page:

    https://piquedemo.wordpress.com/

    Let me know what you think and if any extra questions come up.

  • Unknown's avatar
    jessicawhalenphotography · Member ·

    Also, How would I make the other images below, appear more like : http://rpmrestaurants.com/rpmsteak/chicago/

    What’s up now is my last ditch attempt at just adding photos before a meeting. Ideally I’d like them formatted much crisper as exampled in the above website. Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    Given the way that section under the main top image is constructed, I don’t think it is going to be possible to mimic the site you reference. It is really designed to show a featured image on the left and then an excerpt from that page on the right.

  • Unknown's avatar
    jessicawhalenphotography · Member ·

    Hi, I’m hoping that one of you can help me again?

    https://wordpress.com/stats/insights/searbuffalo.wordpress.com

    I need the top photo that I enlarged to not look like that on the sides.. I’m not sure why it’s happening.

    Also, the pictures below….. how would I get those pictures to just enlarge a bit and go in a straight line across the bottom of the page?

    I just need 3 or so photos under the larger photo…not in the traditional gallery style as shown. Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    I need the top photo that I enlarged to not look like that on the sides.. I’m not sure why it’s happening.

    Are you talking about the black margins on the left and right? If so, that is due to margins set on the overall container div. We can remove those with the following CSS. 

    .home.has-custom-background #page {
    margin-left: 0;
    margin-right: 0;
}

    Also, the pictures below….. how would I get those pictures to just enlarge a bit and go in a straight line across the bottom of the page?

    I’m seeing one larger image with the three eggs. Did you replace the three single images?

  • The topic ‘I need to use CSS to enlarge the photos seen on my homepage’ is closed to new replies.