Jump to content

How to position an image to the side of my web page?

Recommended Posts

Posted

Hi,

I am trying to position a graphic of a half logo to the edge of a web page within a section on a squarespace site. 
Does anyone know how to position and size it, and keep it in the same position and scale on various screen sizes?
I have attached a screenshot of the design.

Any help would be appreciated.

Thanks
Michael 

Screenshot 2022-01-25 at 10.55.22.png

Posted
20 hours ago, michaelgsloane said:

Add to Design > Custom CSS

@media screen and (min-width:992px) {
[data-section-id="61ab54b9347aed563af7ce1c"]:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/10/09/05/33/cosmos-6693008__480.jpg);
    width: 100px;
    height: 350px;
    position: absolute;
    right: 0;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
4 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:992px) {
[data-section-id="61ab54b9347aed563af7ce1c"]:after {
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2021/10/09/05/33/cosmos-6693008__480.jpg);
    width: 100px;
    height: 350px;
    position: absolute;
    right: 0;
}}

Thanks for that. But it still isn't working for me. See screenshot attached.
I see that in the code you have a url background image. How do I swap that with the half symbol?

Thanks 
Michael 

 

Screenshot 2022-01-26 at 12.46.45.png

Posted
8 minutes ago, tuanphan said:

You can replace it with symbol image url

Thanks, but that is still not working. The symbol has disappeared. Maybe I put the code in wrong?

Attached is a screenshot of the custom css.

Thanks again I appreciate the help

Screenshot 2022-01-27 at 12.17.42.png

Posted
On 1/31/2022 at 10:34 PM, michaelgsloane said:

That didn't change anything.

then change your code to this

@media screen and (min-width: 992px) {
    [data-section-id="61ab54b9347aed563af7ce1c"]:after {
        content:"";
        background-image: url(https://static1.squarespace.com/static/61ab4911428d796084f9a2fc/t/61f7ffc196c7247e6b8c731f/1643642817112/Icon_Half-08.png);
        width: 100px;
        height: 100%;
        position: absolute;
        right: 0;
        background-size: cover;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.