Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to set background image at height: 100%

Featured Lock Resolved Issue
How can i set image background to show as 100% height? see: http://ellisellis.hls-it.dk/

.sp-page-builder .page-content #section-id-1482309067697 {
background-color: rgba(255, 0, 0, 1);
background-image: url(/images/evrry_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 50% 50%;
height: 100%; ??

}

7 Answers

Shibbir

More than a month ago #Permalink
Hi

In your given website link I see background image is full covered which means it's full height.

There some tuts about it. You may check this link :

https://css-tricks.com/perfect-full-page-background-image/

Thanks.

Hjalte

More than a month ago #Permalink
but its not full height.
i just added another image 5498 x 3615 px.

The problem is the image and the text addons is setting the height for the container, so unless i add more content it wont go fullscreen.

isnt there a way just to have that row 100% Height ?

Shibbir

More than a month ago #Permalink
Hi there,

Do you need something like this image ?

http://prntscr.com/e23o3m

Thanks.

Hjalte

More than a month ago #Permalink
yes i need it to be fullscreen on all devices....

Shibbir

More than a month ago #Permalink
yes i need it to be fullscreen on all devices....


Hi

Try to set the the vertical position to 100% like bellow code :


background-position: 50% 100%;


Thanks.

Hjalte

More than a month ago #Permalink
no. that's not it.


please see http://hls-it.dk/

simple html / css code :



body {

background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}


The problem is when i want to add that to a row. That row's height is depending on the content /addons


I can add the css to page option css and gets this results
http://ellisellis.hls-it.dk/index.php?option=com_sppagebuilder&view=page&id=20


How does anybody else get a full screen image background with pagebuilder ?

larissan

More than a month ago #Permalink
Can someone please provide a fix? Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 111
Toufiq

Toufiq

Total Accepted Answers: 105
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 61
Ofi Khan

Ofi Khan

Total Accepted Answers: 55
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 34

121

Templates

314136

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us