Skip to main content
B
Brad Dye
Participant
February 16, 2023
Question

Spiral Notebook Background

  • February 16, 2023
  • 3 replies
  • 471 views

I am trying to make a web page with a spiral notebook in the background. The spiral wire needs to be in the left column. Can anyone give me some pointers? A simmple class shoud do it.

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 16, 2023

    Adobe Stock Images ~ Sprial Notebook Backgrounds

    https://stock.adobe.com/search?k=spiral%20notebook

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 16, 2023

    A background image and content must fit ALL devices. With that in mind, you'll need a scaling background image and content on top that can fit small and wide devices. 

     

    Below is a very basic example. Replace background image with your own.

     

     

    Hope that helps. Post back if you have any questions.

     

    Nancy O'Shea— Product User & Community Expert
    B
    Brad DyeAuthor
    Participant
    February 16, 2023

    Thanks a lot for all the help. I am a bit confused as to where I put the code. Here is what I am working with:

    .tdback {
    background-image: url('image001.jpg');
    background-repeat: repeat-y;
    background-color: #FFFF00;

    I put this in my styles folder but it doesn't work. I am confused about .tdback { or tdback. { and where it goes.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    February 16, 2023

    We don't use tables to make layouts anymore.  That's a design tactic from the 1990's.  :thumbs_down

     

    Modern websites use CSS layouts and HTML5 code.  Use the example code I posted above on JS Fiddle.  It makes use of responsive CSS Grids. 

     

    The page background is located in the stylesheet (CSS file).

     

    body, html {
margin: 0;
height: 100%;
display: grid;
color: white;
text-align: center;
background: #333 url(https://picsum.photos/1200/900/) no-repeat center center;
background-size: cover;
}

     

     

     

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    February 16, 2023

    If you have an image that tiles well vertically, using background-image with background-repeat in the CSS of a main containing element would be the way to go...

    https://www.w3schools.com/cssref/pr_background-image.php
    https://www.w3schools.com/cssref/pr_background-repeat.php

    https://www.w3schools.com/cssref/pr_background-position.php


    That way, you can lay the background image in your container, and set it to only repeat vertically.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices