Background image of row

Hi Support Team,

I have added a background image to a row but this image is positioned at the top of the page and an imported part of the image is not vissible. I like to have the image positioned below the navigation header. I also noticed that the position of the image is not the same on all pages.

Can you help me with this?

Thanks in advance.
Jan

Sorry, forgot to gave you the url: www.zaaldesign.nl/sabv

Hello Jan,

I’m not sure what exactly you want to achieve, can you please provide some explanatory screenshots?

You can upload screenshots to your WordPress Media Library and share a link, or you can use one of the online services (Google Drive, Dropbox, etc.).

Kind Regards, Roman.

Hello Roman,

Here is the link for the picture of the sitepage design: https://cldup.com/QJgxb447mc.jpg
HOw can I achiebe this?

Kind Regrads,
Jan

Hello Roman,

Finally I managed to make the pages exactly as designed but I still have a problem with the lenght of the background. If there is not enough text to fill up the whole page, the background image stops at the height of the last text line. How can I make a fixed page lenght for all pages?

See: http://www.zaaldesign.nl/sabv/bedrijfsleven/ to show what I mean.

Thanks in advance for your support.

Best regards, Jan

Hello Jan,

Well, you set that image as row background, so it’s normal that it ends where row ends. You can try to add several empty paragraphs by hitting Enter button several times in order to stretch a short row.

Kind Regards, Roman.

Hello Roman,

Thanks. Works perfect. But I wonder if it is possible to have one background image on all pages i.o. adding a background image to each row/page.

Best regards,
Jan

Hello Jan,

You can try to use the following CSS code instead of adding row background.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#content {
    background-image: url('http://www.zaaldesign.nl/sabv/wp-content/uploads/2017/05/total_background2.jpg');
}

#content.site-content > .container,
#content .hentry {
    background-color: transparent;
}

Kind Regards, Roman.

Hello Roman,

Thanks, exactly what I needed. However on pages with a small text amount the background is cut off at the height of the last text line. No matter how may enters I give.

Have I done something wrong?

Hope you can help me.

Kind regards,
Jan

Hello Jan,

Please try to use this CSS code:

#content {
    background-image: url('http://www.zaaldesign.nl/sabv/wp-content/uploads/2017/05/total_background2.jpg');
    min-height: 450px;
}

…instead of this:

#content {
    background-image: url('http://www.zaaldesign.nl/sabv/wp-content/uploads/2017/05/total_background2.jpg');
}

Kind Regards, Roman.

Thanks Roman,

Works perfect.

Kind regards,
Jan

Great! You are welcome Jan :slight_smile:

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.

Hi Roman,

The background image for all pages works perfect but, on a mobile the background is repeated and therefore some text is illegible. How can I disactivate repeating of the background?

Thanks in advance for your support.

Kind Regards, Jan

Hello Jan,

Please use this CSS code:

#content {
    background-image: url('http://www.zaaldesign.nl/sabv/wp-content/uploads/2017/05/total_background2.jpg');
    min-height: 450px;
    background-repeat: no-repeat;
}

…instead of this:

#content {
    background-image: url('http://www.zaaldesign.nl/sabv/wp-content/uploads/2017/05/total_background2.jpg');
    min-height: 450px;
}

Kind Regards, Roman.

Hi Roman,

Thanks, works perfect as usual.

Kind regards,
Jan

Great! You are welcome Jan :slight_smile:

Kind Regards, Roman.