My background keeps not loading, any help is apprecited!

Posted by Anathematise

posted 1701034716

So, I'm trying to change the background image and it never loads~
Anyone know what the issue possibly is?

Layout originally created by BEEFSTEW: https://layouts.spacehey.com/layout?id=4114

<style>

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

body{

background-image: url(https://images4.imagebam.com/b0/65/79/MENQSTN_o.png);

height: 100%;

background-position: center;

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.container{

margin: 0 auto;

width: 960px;

}

main{

background-color: transparent;

}

nav{

margin: 2em 0em 0em 0em;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

}

nav .top{

background-color: #96d302;

border-bottom: 5px solid #75a403;

border-right: 5px solid #75a403;

border-top: 5px solid #b5ff00;

border-left: 5px solid #b5ff00;

}

nav .links{

background-color: #96d302;

border-bottom: 5px solid #75a403;

border-right: 5px solid #75a403;

border-top: 5px solid #b5ff00;

border-left: 5px solid #b5ff00;

text-align: center;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

nav li::after{

display: none;

}

.profile .general-about{

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

display: flex;

flex-wrap: wrap;

justify-content: center;

text-align: center;

padding: 1em;

color: white;

}

.profile-pic img{

border: 1px solid white;

border-radius: 100%;

}

.general-about .profile-pic{

margin: 0;

}

.profile h1{

font-family: 'Abel', sans-serif;

color: white;

font-size: 30px;

background-color:#96d302;

border-bottom: 5px solid #75a403;

border-right: 5px solid #75a403;

border-top: 5px solid #b5ff00;

border-left: 5px solid #b5ff00;

text-align: center;

padding: .5em;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

}

.profile .profile-info{

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

}

.profile .blog-preview{

color: white;

text-align: center;

}

.profile .mood{

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

text-align: center;

color: white;

padding: .5em;

margin: .5em 0em .5em 0em;

}

.profile .contact .heading,

.profile .table-section .heading{

padding: .5em;

font-family: 'Abel', sans-serif;

font-size: 20px;

line-height: 1.5em;

color: white;

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

text-align: center;

padding: .5em;

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

}

.profile .table-section,

.profile .contact{

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

}

.profile .url-info{

color: white;

text-align: center;

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3)

}

table.details-table td {

background-color: transparent !important;

color: white !important;

}

.profile .blurbs .heading,

.profile .friends .heading{

padding: .5em;

font-family: 'Abel', sans-serif;

font-size: 20px;

line-height: 1.5em;

color: white;

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

text-align: center;

padding: .5em;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

}

.profile .blurbs .section h4{

color: white;

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

text-align: center;

padding: .5em;

font-size: 15px;

}

.profile .blurbs .section p{

color: white;

text-align: center;

}

.profile .blurbs{

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

}

.profile .friends .inner{

text-align: center;

color: white;

}

.profile .friends .friends-grid p{

color: white;

}

.profile .comments-table{

color: white;

text-align: center;

background-color: #182949;

border-bottom: 5px solid #111c32;

border-right: 5px solid #111c32;

border-top: 5px solid #2f4b83;

border-left: 5px solid #2f4b83;

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3)

}

.profile .comments-table .comment-replies{

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

background-color: #96d302;

border-bottom: 5px solid #75a403;

border-right: 5px solid #75a403;

border-top: 5px solid #b5ff00;

border-left: 5px solid #b5ff00;

color: white;

}

.profile .comments-table td{

background-color: transparent;

color: white;

padding: .5em;

}

.comments-table img{

border-radius: 100px;

}

.person img{

border-radius: 100px;

}

footer{

box-shadow: 5px 5px 0px rgba(0, 23, 14, 0.3);

background-color: #96d302;

border-bottom: 5px solid #75a403;

border-right: 5px solid #75a403;

border-top: 5px solid #b5ff00;

border-left: 5px solid #b5ff00;

color: white;

}

color: #b5ff00;

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

}

a:visited {

color: #b5ff00;

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

}

a:hover {

color: white;

font-size: 110%;

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

}

a:active {

color: #b5ff00;

}

nav .links a:hover{

text-decoration: underline;

color: #b5ff00;

font-size: 110%;

}

.count{

text-decoration: underline;

color: #b5ff00;

}

.online{

color: #b5ff00;

font-family: 'Abel', sans-serif;

text-decoration: underline;

text-shadow: 3px 3px 0px rgba(0, 23, 14, 0.3);

font-weight: bold;

font-size: 150%;

animation-name: blink;

animation-iteration-count: infinite;

animation-timing-function: cubic-bezier(1.0,0,0,1.0);

animation-duration: 2s;

}

.online img{

display: none;

}

</style>

Report Topic

3 Replies

Sort Replies:

Reply by Ryan

posted 1701081728

Taking a look at your profile code, nothing immediately appears wrong with it.

The image URL in your profile code that you posted - is that the image that you're trying to change your background to? If so, it loads up for me. I tested it on 2 different browsers, and also tested your code on my profile and everything loaded up.

Permalink Report Reply

Reply by blobcat

posted 1701084543

The background loads fine to me. A possible issue might be that the background is just too big/imagebam is too slow so it takes a while for it to load?

Permalink Report Reply

Reply by Anathematise

posted 1701153891

@ Ryan: Yes, https://images4.imagebam.com/b0/65/79/MENQSTN_o.png is the image I'm trying to change it to~ Hmm, I see, I wonder why it never loads fully/all the time. Thank you very much for the help! C:

@ blobcat: Hmm, I see, I suppose those are very possible! I'll try to at least make the image smaller~ Thank you very for the help! C:

Permalink Report Reply

« Web, HTML, Tech Forum

My background keeps not loading, any help is apprecited!

Posted by Anathematise

3 Replies

Reply by Ryan

Reply by blobcat

Reply by Anathematise