Modern Portfolio Pro – Background & Menu help

[bloomweb]

I would like some help with finding the dimensions for the home page background image sizes for all the widgets. Also are there any tips on reducing the file size for faster page load? I'm also looking for the area to change the primary menu background hover colour. I would like the selected menu item to remain that colour once it is chosen.

My site is : http://174.120.222.34/~elegance

Thanks in advance.

http://174.120.222.34/~elegance

[Marcy]

The image sizes are defined in functions.php with these lines.

//* Add new image sizes
add_image_size( 'blog', 340, 140, TRUE );
add_image_size( 'portfolio', 340, 230, TRUE );

So in the featured posts or pages widgets on the home page, you can choose to use either image size.

If you want to your website images compressed, you can use the plugins
WP Smush https://wordpress.org/plugins/wp-smushit/
or Compress JPG and PNG Images https://wordpress.org/plugins/tiny-compress-images/

---

Marcy | Amethyst Website Design | Twitter

[bloomweb]

Thanks Marcy! I found the image sizes. But I'm also looking for the background image size for each of the sections of the home page. As you can see my background image for the slider seems to be repeating. I want the background repeated only once. I have checked the functions.php file but can't see it anywhere.

Thanks for the image compression recommendations. That was going to be my next step. 🙂

[Marcy]

It looks like you're using Modern Portfolio Pro.

There isn't a background image used in that theme. If you decide to use a background image in any theme, it can be one that can be tiled or repeated or you can use one large image and make it stretch to cover the entire background.

Your background image is 1375 by 1000px. The size doesn't matter, as long as it can be repeated or tiled. If you don't like the way it repeats, you can choose one that can repeat.

You can also just use the one background image and use "cover" to make it stretch to fill the area behind the slider.

Find

#about {
  background-image: url("http://174.120.222.34/~elegance/wp-content/uploads/2015/06/03-e1434457845256.jpg");
  padding: 60px 0 36px;
}

and add these two lines so it looks like:

#about {
  background-image: url("http://174.120.222.34/~elegance/wp-content/uploads/2015/06/03-e1434457845256.jpg");
  padding: 60px 0 36px;
  background-size: cover;
  background-repeat: no-repeat;
}

---

Marcy | Amethyst Website Design | Twitter

[Erik D. Slater]

Hmmm ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[bloomweb]

Thanks Marcy. I actually want to use that image but don't want to repeat it. Is that possible?

Thanks for the other background patterns site.

[pgleave]

Hi,

There are actually no defined dimensions for the widget area, as the theme is mobile responsive. The About section is a full browser width area, and the height is defined by whatever content is placed.

Here's the css to stop the image repeating, and centre it:

#about {
background: url("yourimagelinkhere") no-repeat;
padding: 60px 0 36px;
background-position: center;
}

You'd then need to size the image to what you think is best: ie: wide enough for people using wide screens if you want it to bleed off, and high enough, say, for your slider (in your case 630px).

Just be aware that if the image is that size, people on mobile devices will be downloading a larger image than they need (ie file size).

That can be solved by adding another css entry in the media queries for smaller screens, referencing an image sized down for that screen width (ie one for iPads, one for mobile).

---

I love to design

[Erik D. Slater]

bloomweb: Are you looking for the background image effect that looks something like Sixteen Nine or Parallax?

Apologies if I have misunderstood. I'm finding this thread a bit confusing ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[pgleave]

Good point. Add

background-size: cover;

to your #about declaration to achieve the same effects as Parallax (if that's the case)

I'd still encourage adding smaller sized images to your media queries, just so people on smaller devices get a faster site load.

---

I love to design

[Marcy]

Sorry, my answer was still on the screen and I didn't see the other replies.
This should do what you want.

You can also just use the one background image and use “cover” to make it stretch to fill the area behind the slider.

Find

#about {
background-image: url("http://174.120.222.34/~elegance/wp-content/uploads/2015/06/03-e1434457845256.jpg");
padding: 60px 0 36px;
}
and add these two lines so it looks like:

#about {
background-image: url("http://174.120.222.34/~elegance/wp-content/uploads/2015/06/03-e1434457845256.jpg");
padding: 60px 0 36px;
background-size: cover;
background-repeat: no-repeat;
}

And I saw that others have already suggested it too.

---

Marcy | Amethyst Website Design | Twitter

[bloomweb]

Thanks a lot guys! I added the changes you requested Marcy and they worked!

Would it help to use an image compression plugin to reduce the size of the images, or change the sizes under the @media queries?

Thanks.

[Marcy]

You can use either of the plugins I listed in my first answer to compress your images. They both work on image upload or you can trigger them manually for images already in your Media Library.
For images that you use directly from /theme-folder/images, you can upload them to Media Library and then download them back to /images or you can use Google PageSpeed Insights to download compressed images.
https://developers.google.com/speed/pagespeed/insights/

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts