Background picture | expand to whole page

JakeLake · June 12, 2022

Site URL: https://www.konsulentoppdrag.no

So I want the top picture to cover the whole page as backgound please?

Edited June 12, 2022 by JakeLake
new info

tuanphan · June 13, 2022

You mean Header Background Image?

JakeLake · June 13, 2022

1 hour ago, tuanphan said:

You mean Header Background Image?

YES - the picture at top with the woman + man... to cover the whole page?

tuanphan · June 14, 2022

Try adding this code to Design > Custom CSS

/* Site background image */
body.homepage {
.section-background, .page-section {
    background: transparent !important;
}
.section-background img{
    visibility: hidden;
}
& {
   background-image: url(https://images.squarespace-cdn.com/content/v1/612e107b86a7f92f8a1b9d3a/abd483a8-6166-4a8c-b3ac-e983583e2d0a/Ledige_Konsulentoppdrag.jpg?format=2500w);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

JakeLake · June 14, 2022

38 minutes ago, tuanphan said:

Try adding this code to Design > Custom CSS

/* Site background image */
body.homepage {
.section-background, .page-section {
    background: transparent !important;
}
.section-background img{
    visibility: hidden;
}
& {
   background-image: url(https://images.squarespace-cdn.com/content/v1/612e107b86a7f92f8a1b9d3a/abd483a8-6166-4a8c-b3ac-e983583e2d0a/Ledige_Konsulentoppdrag.jpg?format=2500w);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

Didn't do the trick.... also I seem to have a 'missing closing }' error....

@media screen and (max-width:767px) {
h1 {font-size: 28px;}
}

figure.gallery-grid-item {
position: relative;
}
.gallery-caption {
position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 7%;
transition: opacity ease 200ms !important;
opacity: 0 !important; pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
background: #f4f6ea; /* overlay color */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
opacity: 0.0;
}
/* remove gap */
figcaption {
padding: 0 !important;
}
.gallery-grid-item img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
.gallery-grid-item:hover img {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
.gallery-caption p {white-space:pre}
.gallery-caption p {text-align:center}
.gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold}

[data-section-id="61e99335f5b8f86607fd6963"] {
.gallery-grid-item {
overflow: hidden;
img{
-webkit-filter: grayscale(1);
transition: 0.2s;
}
position: relative;
.gallery-caption{
opacity: 0 !important;
transition-delay: 0ms !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0 !important;
pointer-events: none;
.gallery-caption-wrapper{
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 10vh;
box-sizing: border-box;
border: 3px solid #F2BA40;
p.gallery-caption-content{
font-size: 20px !important;
font-family: poppins !important;
color: #F2BA40;-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
font-weight: 900 !important;
line-height: 25px !important;
}
@media(max-width: 767px){
padding-bottom: 15px !important;
p{
font-size: 20px !important;
}
}
}
}
}
.gallery-grid-item:hover {
overflow: hidden;
img{
-webkit-filter: grayscale(0) !important;
transform: scale(1.01);
};
.gallery-caption{
opacity: 1 !important;
}
}
}
.gallery-grid-item:hover {
overflow: hidden;
img{
-webkit-filter: grayscale(0) !important;
transform: scale(1.01);
};
.gallery-caption{
opacity: 1 !important;
}
}
div#page-section-61e99815f067434fa1f1cb8d .span-12 {
border: 3px solid #F2BA40;
}
/* Scrolling text color */
div.marquee-block * {
color: green !important;
}
/* Site background image */
body.homepage {
.section-background, .page-section {
background: transparent !important;
}
.section-background img{
visibility: hidden;
}
& {
background-image: url(https://images.squarespace-cdn.com/content/v1/612e107b86a7f92f8a1b9d3a/abd483a8-6166-4a8c-b3ac-e983583e2d0a/Ledige_Konsulentoppdrag.jpg?format=2500w);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent !important;
}

tuanphan · June 15, 2022

On 6/14/2022 at 3:49 PM, JakeLake said:

Didn't do the trick.... also I seem to have a 'missing closing }' error....

@media screen and (max-width:767px) {
h1 {font-size: 28px;}
}

figure.gallery-grid-item {
position: relative;
}
.gallery-caption {
position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 7%;
transition: opacity ease 200ms !important;
opacity: 0 !important; pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
background: #f4f6ea; /* overlay color */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
opacity: 0.0;
}
/* remove gap */
figcaption {
padding: 0 !important;
}
.gallery-grid-item img {
filter: grayscale(1);
-webkit-filter: grayscale(1);
}
.gallery-grid-item:hover img {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
.gallery-caption p {white-space:pre}
.gallery-caption p {text-align:center}
.gallery-caption p:first-line {color: blue; font-size: 1rem; font-weight:bold}

[data-section-id="61e99335f5b8f86607fd6963"] {
.gallery-grid-item {
overflow: hidden;
img{
-webkit-filter: grayscale(1);
transition: 0.2s;
}
position: relative;
.gallery-caption{
opacity: 0 !important;
transition-delay: 0ms !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0 !important;
pointer-events: none;
.gallery-caption-wrapper{
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 10vh;
box-sizing: border-box;
border: 3px solid #F2BA40;
p.gallery-caption-content{
font-size: 20px !important;
font-family: poppins !important;
color: #F2BA40;-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000000;
font-weight: 900 !important;
line-height: 25px !important;
}
@media(max-width: 767px){
padding-bottom: 15px !important;
p{
font-size: 20px !important;
}
}
}
}
}
.gallery-grid-item:hover {
overflow: hidden;
img{
-webkit-filter: grayscale(0) !important;
transform: scale(1.01);
};
.gallery-caption{
opacity: 1 !important;
}
}
}
.gallery-grid-item:hover {
overflow: hidden;
img{
-webkit-filter: grayscale(0) !important;
transform: scale(1.01);
};
.gallery-caption{
opacity: 1 !important;
}
}
div#page-section-61e99815f067434fa1f1cb8d .span-12 {
border: 3px solid #F2BA40;
}
/* Scrolling text color */
div.marquee-block * {
color: green !important;
}
/* Site background image */
body.homepage {
.section-background, .page-section {
background: transparent !important;
}
.section-background img{
visibility: hidden;
}
& {
background-image: url(https://images.squarespace-cdn.com/content/v1/612e107b86a7f92f8a1b9d3a/abd483a8-6166-4a8c-b3ac-e983583e2d0a/Ledige_Konsulentoppdrag.jpg?format=2500w);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent !important;
}

Last Line, my code has 2 }}

Your code has 1 } only

JakeLake · June 16, 2022

19 hours ago, tuanphan said:

Last Line, my code has 2 }}

Your code has 1 } only

JakeLake · June 16, 2022

INDEED!

So if I want the opacity to match upper part (60%)?

And I want to keep the original footer?

tuanphan · June 16, 2022

4 hours ago, JakeLake said:

INDEED!

So if I want the opacity to match upper part (60%)?

And I want to keep the original footer?

#1. Try this

    opacity: 0.6;

#2. Change code to this

/* Site background image */
body.homepage {
article .section-background, article .page-section {
    background: transparent !important;
}
article .section-background img{
    visibility: hidden;
}
& {
   background-image: url(https://images.squarespace-cdn.com/content/v1/612e107b86a7f92f8a1b9d3a/abd483a8-6166-4a8c-b3ac-e983583e2d0a/Ledige_Konsulentoppdrag.jpg?format=2500w);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
  }}

JakeLake · June 17, 2022

20 hours ago, tuanphan said:

#1. Try this

    opacity: 0.6;

#2. Change code to this

/* Site background image */
body.homepage {
article .section-background, article .page-section {
    background: transparent !important;
}
article .section-background img{
    visibility: hidden;
}
& {
   background-image: url(https://images.squarespace-cdn.com/content/v1/612e107b86a7f92f8a1b9d3a/abd483a8-6166-4a8c-b3ac-e983583e2d0a/Ledige_Konsulentoppdrag.jpg?format=2500w);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
  }}

#2 worked great - thank you!

#1 not opacity though

Background picture | expand to whole page

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources