#CSS Backgrounds

[izicodes]

CSS Background Generators | Resources ✨

I am literally one of the laziest people with making backgrounds - either manually or looking for a good image, so I looked online for some generators and thought I would share them here!

haikei - LINK

bgjar - LINK

coolbackgrounds - LINK

meshgradient - LINK

mesh-gradients - LINK

gradienta - LINK

svgbackgrounds - LINK

SVG patterns - LINK

pattern monster - LINK

Hope this helps someone! 💗

[webtutorsblog]

Learn Online CSS Design Fundamentals: Backgrounds, Borders, Margins, Padding, Height, Width & Box Model

In this blog post, we will delve into the essential aspects of CSS backgrounds, borders, margins, padding, height, width, and the box model. Whether you're a beginner or an experienced web developer, understanding and utilizing these CSS properties effectively can greatly enhance the visual appeal and layout of your webpages. Follow along as we explore each topic with concise explanations and practical examples.

CSS Backgrounds:

CSS backgrounds allow you to style the background of an element. Here's an overview of commonly used background properties:

a. background-color:

The "background-color" property sets the background color of an element. For example, to set a blue background color, use:

.element {

  background-color: blue;

}

b. background-image:

With "background-image," you can specify an image as the background of an element. Let's say you have an image called "bg-image.jpg" in the same directory as your CSS file. To set it as the background image, use:

.element {

  background-image: url("bg-image.jpg");

}

CSS Borders:

CSS borders enable you to add borders around elements. Here's an overview of relevant properties:

a. border-style:

The "border-style" property determines the style of the border. For example, to create a solid border, use:

.element {

  border-style: solid;

} b. border-color:

To set the color of the border, you can use the "border-color" property. For instance:

.element {

  border-color: red;

}

CSS Margins:

CSS Margins allow you to control the space around elements. Here are the key properties to consider:

a. margin-top, margin-right, margin-bottom, margin-left:

You can set individual margin values for each side of an element. For example:

.element {

  margin-top: 10px;

  margin-right: 20px;

  margin-bottom: 10px;

  margin-left: 20px;

}

CSS Padding:

CSS Padding is the space between the content of an element and its borders. Consider the following property:

a. padding:

The "padding" property sets the padding for all four sides of an element. For instance:

.element {

  padding: 15px;

}

CSS Height and Width:

Controlling the height and width of elements is crucial for achieving desired layouts. Here's what you need to know:

a. height:

To set the height of an element, use the "height" property. For example:

.element {

  height: 200px;

}

b. width:

Similarly, the "width" property sets the width of an element. For instance:

.element {

  width: 300px;

}

CSS Box Model:

Understanding the CSS box model is fundamental to layout design. It describes how elements are rendered on the page. Here's a brief overview:

The box model consists of four components: content, padding, border, and margin. When you set the width and height of an element, it applies to the content area. The padding adds space around the content, followed by the border, which surrounds both the content and padding. Finally, the margin creates space outside the border, separating it from other elements.

Consider the following example:

.element {

  width: 200px;

  height: 150px;

  padding: 20px;

  border: 2px solid black;

  margin: 10px; }

Conclusion:

In this blog post, we covered the fundamental aspects of CSS backgrounds, borders, margins, padding, height, and width. By mastering these properties, you can take your web design skills to the next level. Experiment with different combinations, explore advanced techniques, and create visually stunning webpages. Stay tuned for more informative content at webtutor.dev!

Don’t Miss to Read

Learn Online CSS Background

Learn Online CSS Margins

Learn Online CSS Padding

Learn Online CSS Box Model

[daily-xisuma]

zizuma after 12 straight hours of code work (all he’s had to eat was 5 adderal and an uncrustable)

[075] Hands stained with blood (stupid coding mistake that takes anywhere from 1 second to 10 days to find)

[maggyoutthere]

WOOO OK OK still a big wip but i can properly post it now!! Ben also has an askblog!! @eggieboi117 !! His blog has been mostly as a way for me to test how tumblr works with html and css but heyyy finally got that so desired windows 7 aesthetic

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[divinector]

Animated Bubbles Background

[codenewbies]

Background Blur CSS

[beepeircings]

Tears streaming down my eyes 😭😭😭😭😭 I gotta lock in 😭😭😭😭 I need yolok in😭😭😭

[shovelpuppy]

seamless south park backgrounds from old geocities

[codingflicks]

Animated Background CSS

[jcmarchi]

How to Create Multi-Step Forms With Vanilla JavaScript and CSS

New Post has been published on https://thedigitalinsider.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/

How to Create Multi-Step Forms With Vanilla JavaScript and CSS

Multi-step forms are a good choice when your form is large and has many controls. No one wants to scroll through a super-long form on a mobile device. By grouping controls on a screen-by-screen basis, we can improve the experience of filling out long, complex forms.

But when was the last time you developed a multi-step form? Does that even sound fun to you? There’s so much to think about and so many moving pieces that need to be managed that I wouldn’t blame you for resorting to a form library or even some type of form widget that handles it all for you.

But doing it by hand can be a good exercise and a great way to polish the basics. I’ll show you how I built my first multi-step form, and I hope you’ll not only see how approachable it can be but maybe even spot areas to make my work even better.

We’ll walk through the structure together. We’ll build a job application, which I think many of us can relate to these recent days. I’ll scaffold the baseline HTML, CSS, and JavaScript first, and then we’ll look at considerations for accessibility and validation.

I’ve created a GitHub repo for the final code if you want to refer to it along the way.

The structure of a multi-step form

Our job application form has four sections, the last of which is a summary view, where we show the user all their answers before they submit them. To achieve this, we divide the HTML into four sections, each identified with an ID, and add navigation at the bottom of the page. I’ll give you that baseline HTML in the next section.

Navigating the user to move through sections means we’ll also include a visual indicator for what step they are at and how many steps are left. This indicator can be a simple dynamic text that updates according to the active step or a fancier progress bar type of indicator. We’ll do the former to keep things simple and focused on the multi-step nature of the form.,

The structure and basic styles

We’ll focus more on the logic, but I will provide the code snippets and a link to the complete code at the end.

Let’s start by creating a folder to hold our pages. Then, create an index.html file and paste the following into it:

Open HTML

<form id="myForm"> <section class="group-one" id="one"> <div class="form-group"> <div class="form-control"> <label for="name">Name <span style="color: red;">*</span></label> <input type="text" id="name" name="name" placeholder="Enter your name"> </div> <div class="form-control"> <label for="idNum">ID number <span style="color: red;">*</span></label> <input type="number" id="idNum" name="idNum" placeholder="Enter your ID number"> </div> </div> <div class="form-group"> <div class="form-control"> <label for="email">Email <span style="color: red;">*</span></label> <input type="email" id="email" name="email" placeholder="Enter your email"> </div> <div class="form-control"> <label for="birthdate">Date of Birth <span style="color: red;">*</span></label> <input type="date" id="birthdate" name="birthdate" max="2006-10-01" min="1924-01-01"> </div> </div> </section> <section class="group-two" id="two"> <div class="form-control"> <label for="document">Upload CV <span style="color: red;">*</span></label> <input type="file" name="document" id="document"> </div> <div class="form-control"> <label for="department">Department <span style="color: red;">*</span></label> <select id="department" name="department"> <option value="">Select a department</option> <option value="hr">Human Resources</option> <option value="it">Information Technology</option> <option value="finance">Finance</option> </select> </div> </section> <section class="group-three" id="three"> <div class="form-control"> <label for="skills">Skills (Optional)</label> <textarea id="skills" name="skills" rows="4" placeholder="Enter your skills"></textarea> </div> <div class="form-control"> <input type="checkbox" name="terms" id="terms"> <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label> </div> <button id="btn" type="submit">Confirm and Submit</button> </section> <div class="arrows"> <button type="button" id="navLeft">Previous</button> <span id="stepInfo"></span> <button type="button" id="navRight">Next</button> </div> </form> <script src="script.js"></script>

Looking at the code, you can see three sections and the navigation group. The sections contain form inputs and no native form validation. This is to give us better control of displaying the error messages because native form validation is only triggered when you click the submit button.

Next, create a styles.css file and paste this into it:

Open base styles

:root --primary-color: #8c852a; --secondary-color: #858034; body font-family: sans-serif; line-height: 1.4; margin: 0 auto; padding: 20px; background-color: #f4f4f4; max-width: 600px; h1 text-align: center; form background: #fff; padding: 40px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; .form-group display: flex; gap: 7%; .form-group > div width: 100%; input:not([type="checkbox"]), select, textarea width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; .form-control margin-bottom: 15px; button display: block; width: 100%; padding: 10px; color: white; background-color: var(--primary-color); border: none; border-radius: 4px; cursor: pointer; font-size: 16px; button:hover background-color: var(--secondary-color); .group-two, .group-three display: none; .arrows display: flex; justify-content: space-between align-items: center; margin-top: 10px; #navLeft, #navRight width: fit-content; @media screen and (max-width: 600px) .form-group flex-direction: column;

Open up the HTML file in the browser, and you should get something like the two-column layout in the following screenshot, complete with the current page indicator and navigation.

Adding functionality with vanilla JavaScript

Now, create a script.js file in the same directory as the HTML and CSS files and paste the following JavaScript into it:

Open base scripts

const stepInfo = document.getElementById("stepInfo"); const navLeft = document.getElementById("navLeft"); const navRight = document.getElementById("navRight"); const form = document.getElementById("myForm"); const formSteps = ["one", "two", "three"]; let currentStep = 0; function updateStepVisibility() formSteps.forEach((step) => document.getElementById(step).style.display = "none"; ); document.getElementById(formSteps[currentStep]).style.display = "block"; stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`; navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block"; document.addEventListener("DOMContentLoaded", () => navLeft.style.display = "none"; updateStepVisibility(); navRight.addEventListener("click", () => if (currentStep < formSteps.length - 1) currentStep++; updateStepVisibility(); ); navLeft.addEventListener("click", () => if (currentStep > 0) currentStep--; updateStepVisibility(); ); );

This script defines a method that shows and hides the section depending on the formStep values that correspond to the IDs of the form sections. It updates stepInfo with the current active section of the form. This dynamic text acts as a progress indicator to the user.

It then adds logic that waits for the page to load and click events to the navigation buttons to enable cycling through the different form sections. If you refresh your page, you will see that the multi-step form works as expected.

Multi-step form navigation

Let’s dive deeper into what the Javascript code above is doing. In the updateStepVisibility() function, we first hide all the sections to have a clean slate:

formSteps.forEach((step) => document.getElementById(step).style.display = "none"; );

Then, we show the currently active section:

document.getElementById(formSteps[currentStep]).style.display = "block";`

Next, we update the text that indicators progress through the form:

stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;

Finally, we hide the Previous button if we are at the first step and hide the Next button if we are at the last section:

navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Let’s look at what happens when the page loads. We first hide the Previous button as the form loads on the first section:

document.addEventListener("DOMContentLoaded", () => navLeft.style.display = "none"; updateStepVisibility();

Then we grab the Next button and add a click event that conditionally increments the current step count and then calls the updateStepVisibility() function, which then updates the new section to be displayed:

navRight.addEventListener("click", () => if (currentStep < formSteps.length - 1) currentStep++; updateStepVisibility(); );

Finally, we grab the Previous button and do the same thing but in reverse. Here, we are conditionally decrementing the step count and calling the updateStepVisibility():

navLeft.addEventListener("click", () => if (currentStep > 0) currentStep--; updateStepVisibility(); );

Handling errors

Have you ever spent a good 10+ minutes filling out a form only to submit it and get vague errors telling you to correct this and that? I prefer it when a form tells me right away that something’s amiss so that I can correct it before I ever get to the Submit button. That’s what we’ll do in our form.

Our principle is to clearly indicate which controls have errors and give meaningful error messages. Clear errors as the user takes necessary actions. Let’s add some validation to our form. First, let’s grab the necessary input elements and add this to the existing ones:

const nameInput = document.getElementById("name"); const idNumInput = document.getElementById("idNum"); const emailInput = document.getElementById("email"); const birthdateInput = document.getElementById("birthdate") const documentInput = document.getElementById("document"); const departmentInput = document.getElementById("department"); const termsCheckbox = document.getElementById("terms"); const skillsInput = document.getElementById("skills");

Then, add a function to validate the steps:

Open validation script

function validateStep(step)

Here, we check if each required input has some value and if the email input has a valid input. Then, we set the isValid boolean accordingly. We also call a showError() function, which we haven’t defined yet.

Paste this code above the validateStep() function:

function showError(input, message) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.add("error"); errorSpan.textContent = message;

Now, add the following styles to the stylesheet:

Open validation styles

input:focus, select:focus, textarea:focus outline: .5px solid var(--primary-color); input.error, select.error, textarea.error outline: .5px solid red; .error-message font-size: x-small; color: red; display: block; margin-top: 2px; .arrows color: var(--primary-color); font-size: 18px; font-weight: 900; #navLeft, #navRight display: flex; align-items: center; gap: 10px; #stepInfo color: var(--primary-color);

If you refresh the form, you will see that the buttons do not take you to the next section till the inputs are considered valid:

Finally, we want to add real-time error handling so that the errors go away when the user starts inputting the correct information. Add this function below the validateStep() function:

Open real-time validation script

function setupRealtimeValidation() nameInput.addEventListener("input", () => if (nameInput.value.trim() !== "") clearError(nameInput); ); idNumInput.addEventListener("input", () => if (idNumInput.value.trim() !== "") clearError(idNumInput); ); emailInput.addEventListener("input", () => if (emailInput.validity.valid) clearError(emailInput); ); birthdateInput.addEventListener("change", () => if (birthdateInput.value !== "") clearError(birthdateInput); ); documentInput.addEventListener("change", () => if (documentInput.files[0]) clearError(documentInput); ); departmentInput.addEventListener("change", () => if (departmentInput.value !== "") clearError(departmentInput); ); termsCheckbox.addEventListener("change", () => if (termsCheckbox.checked) clearError(termsCheckbox); );

This function clears the errors if the input is no longer invalid by listening to input and change events then calling a function to clear the errors. Paste the clearError() function below the showError() one:

function clearError(input) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.remove("error"); errorSpan.textContent = "";

And now the errors clear when the user types in the correct value:

The multi-step form now handles errors gracefully. If you do decide to keep the errors till the end of the form, then at the very least, jump the user back to the erroring form control and show some indication of how many errors they need to fix.

Handling form submission

In a multi-step form, it is valuable to show the user a summary of all their answers at the end before they submit and to offer them an option to edit their answers if necessary. The person can’t see the previous steps without navigating backward, so showing a summary at the last step gives assurance and a chance to correct any mistakes.

Let’s add a fourth section to the markup to hold this summary view and move the submit button within it. Paste this just below the third section in index.html:

Open HTML

<section class="group-four" id="four"> <div class="summary-section"> <p>Name: </p> <p id="name-val"></p> <button type="button" class="edit-btn" id="name-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>ID Number: </p> <p id="id-val"></p> <button type="button" class="edit-btn" id="id-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Email: </p> <p id="email-val"></p> <button type="button" class="edit-btn" id="email-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Date of Birth: </p> <p id="bd-val"></p> <button type="button" class="edit-btn" id="bd-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>CV/Resume: </p> <p id="cv-val"></p> <button type="button" class="edit-btn" id="cv-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Department: </p> <p id="dept-val"></p> <button type="button" class="edit-btn" id="dept-edit"> <span>✎</span> <span>Edit</span> </button> </div> <div class="summary-section"> <p>Skills: </p> <p id="skills-val"></p> <button type="button" class="edit-btn" id="skills-edit"> <span>✎</span> <span>Edit</span> </button> </div> <button id="btn" type="submit">Confirm and Submit</button> </section>

Then update the formStep in your Javascript to read:

const formSteps = ["one", "two", "three", "four"];

Finally, add the following classes to styles.css:

.summary-section display: flex; align-items: center; gap: 10px; .summary-section p:first-child width: 30%; flex-shrink: 0; border-right: 1px solid var(--secondary-color); .summary-section p:nth-child(2) width: 45%; flex-shrink: 0; padding-left: 10px; .edit-btn width: 25%; margin-left: auto; background-color: transparent; color: var(--primary-color); border: .7px solid var(--primary-color); border-radius: 5px; padding: 5px; .edit-btn:hover border: 2px solid var(--primary-color); font-weight: bolder; background-color: transparent;

Now, add the following to the top of the script.js file where the other consts are:

const nameVal = document.getElementById("name-val"); const idVal = document.getElementById("id-val"); const emailVal = document.getElementById("email-val"); const bdVal = document.getElementById("bd-val") const cvVal = document.getElementById("cv-val"); const deptVal = document.getElementById("dept-val"); const skillsVal = document.getElementById("skills-val"); const editButtons = "name-edit": 0, "id-edit": 0, "email-edit": 0, "bd-edit": 0, "cv-edit": 1, "dept-edit": 1, "skills-edit": 2 ;

Then add this function in scripts.js:

function updateSummaryValues() nameVal.textContent = nameInput.value; idVal.textContent = idNumInput.value; emailVal.textContent = emailInput.value; bdVal.textContent = birthdateInput.value; const fileName = documentInput.files[0]?.name; if (fileName) const extension = fileName.split(".").pop(); const baseName = fileName.split(".")[0]; const truncatedName = baseName.length > 10 ? baseName.substring(0, 10) + "..." : baseName; cvVal.textContent = `$truncatedName.$extension`; else cvVal.textContent = "No file selected"; deptVal.textContent = departmentInput.value; skillsVal.textContent = skillsInput.value || "No skills submitted"; }

This dynamically inserts the input values into the summary section of the form, truncates the file names, and offers a fallback text for the input that was not required.

Then update the updateStepVisibility() function to call the new function:

function updateStepVisibility() formSteps.forEach((step) => document.getElementById(step).style.display = "none"; ); document.getElementById(formSteps[currentStep]).style.display = "block"; stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`; if (currentStep === 3) updateSummaryValues(); navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

Finally, add this to the DOMContentLoaded event listener:

Object.keys(editButtons).forEach((buttonId) => const button = document.getElementById(buttonId); button.addEventListener("click", (e) => currentStep = editButtons[buttonId]; updateStepVisibility(); ); );

Running the form, you should see that the summary section shows all the inputted values and allows the user to edit any before submitting the information:

And now, we can submit our form:

form.addEventListener("submit", (e) => e.preventDefault(); if (validateStep(2)) alert("Form submitted successfully!"); form.reset(); currentFormStep = 0; updateStepVisibility(); );

Our multi-step form now allows the user to edit and see all the information they provide before submitting it.

Accessibility tips

Making multi-step forms accessible starts with the basics: using semantic HTML. This is half the battle. It is closely followed by using appropriate form labels.

Other ways to make forms more accessible include giving enough room to elements that must be clicked on small screens and giving meaningful descriptions to the form navigation and progress indicators.

Offering feedback to the user is an important part of it; it’s not great to auto-dismiss user feedback after a certain amount of time but to allow the user to dismiss it themselves. Paying attention to contrast and font choice is important, too, as they both affect how readable your form is.

Let’s make the following adjustments to the markup for more technical accessibility:

Add aria-required="true" to all inputs except the skills one. This lets screen readers know the fields are required without relying on native validation.

Add role="alert" to the error spans. This helps screen readers know to give it importance when the input is in an error state.

Add role="status" aria-live="polite" to the .stepInfo. This will help screen readers understand that the step info keeps tabs on a state, and the aria-live being set to polite indicates that should the value change, it does not need to immediately announce it.

In the script file, replace the showError() and clearError() functions with the following:

function showError(input, message) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.add("error"); input.setAttribute("aria-invalid", "true"); input.setAttribute("aria-describedby", errorSpan.id); errorSpan.textContent = message; function clearError(input) const formControl = input.parentElement; const errorSpan = formControl.querySelector(".error-message"); input.classList.remove("error"); input.removeAttribute("aria-invalid"); input.removeAttribute("aria-describedby"); errorSpan.textContent = "";

Here, we programmatically add and remove attributes that explicitly tie the input with its error span and show that it is in an invalid state.

Finally, let’s add focus on the first input of every section; add the following code to the end of the updateStepVisibility() function:

const currentStepElement = document.getElementById(formSteps[currentStep]); const firstInput = currentStepElement.querySelector( "input, select, textarea" ); if (firstInput) firstInput.focus();

And with that, the multi-step form is much more accessible.

Conclusion

There we go, a four-part multi-step form for a job application! As I said at the top of this article, there’s a lot to juggle — so much so that I wouldn’t fault you for looking for an out-of-the-box solution.

But if you have to hand-roll a multi-step form, hopefully now you see it’s not a death sentence. There’s a happy path that gets you there, complete with navigation and validation, without turning away from good, accessible practices.

And this is just how I approached it! Again, I took this on as a personal challenge to see how far I could get, and I’m pretty happy with it. But I’d love to know if you see additional opportunities to make this even more mindful of the user experience and considerate of accessibility.

References

Here are some relevant links I referred to when writing this article:

How to Structure a Web Form (MDN)

Multi-page Forms (W3C.org)

Create accessible forms (A11y Project)

[elftwink]

am currently working on a neocities site (which i cannot give you the url for yet because im working on the css still and there's no content also it looks ugly still) and oh man does it take me back to ye olde days of custom theme editing on here. i still use a custom theme obvs but back in like 2014/2015ish when i was really into indie rp custom themes were all the rage and you would spend hours editing some character specific image for your bg and then another several hours trying to make the css line up with your image (never at any point did i attempt to actually like. learn html or css. i just read other people's theme codes and edited the parts i could understand and solved problems as they arose. i distinctly remember one time i was using a base that had two sidebars and i only wanted one and deleting the section broke the theme in disastrous ways [bc i had no idea what i was doing] so i literally just made all the elements in the sidebar transparent and moved them off the screen LMAO. the best i ever got was moving from fully built custom themes that i edited to base themes that i built off of)

anyway while im slightly better now (im even reading tutorials! am i following them? sorry i have to go i think someones calling me) i am using a layout builder to build the homepage so it is even more reminding me of mid-2010s tumblr. much like building off a base theme, and definitely easier to understand than tumblr theme building (this time i at least know what all the different pieces of code are doing, even when im not sure how or why, or how to duplicate the effect under slightly different circumstances. but progress is progress!).

a good but annoying thing about the layout that im using is that i havent actually edited the site wide stylesheet, just used internal css on that one page, so when i go to make literally any other page i'll have to start from scratch. this is good because i am learning a lot and i think without doing it this way i would end up with a bunch of useless stuff in the stylesheet that really should be page-specific that i would have to correct with internal or inline css later. annoying because what do you mean i have to make decisions about the sizing and positions of the content? i literally just did that

also im kind of nervous to touch the general stylesheet because im pretty sure what i'll actually want to do is have a couple of stylesheets for different 'sections' of the website, to maintain cohesion between pages of the 'same' type but still allow a lot of fun customization on a per-page basis, but that requires deciding what 'sections' i want on the website and that is a whole other can of worms. but also you can't start without starting so i should probably just try to build a really simple layout and go from there (after all, if it sucks, it's not like i can't just create a new stylesheet, or do the css for each page independently until i hit a groove that's actually worth moving to the stylesheet). but also first i have to finish this goddamn homepage. which means i gotta find a header image that doesn't look ugly as shit

[mightybomber]

Repeating Mighty BG for the fanblog, cause why not.

[alexiostheweirdovampire]

Customizing your blog tumblr can you help me?

When I try to put in an image for my background the preview looks fine,

The editor here looks fine,

But when I exit it doesn’t work.

I don’t know what im doing wrong or why this is happening but I need some help please. I’m fairly new to coding and website-making so a little insight would be wonderful. <:]

[divinector]

Animated Background

[codenewbies]

CSS Blur Background Image on hover