Disallow duplicate background

Disallow duplicate background
0

#1

Hey there, I’m trying to stop duplicate my background image, I also tried to put “background-image: url(”") no-repeat;
When I try “no-repeat” my all image is going away. Here is my code’s

15%20PM


#2

Try using background: instead of background-image:. If that does not work, can you post a link to your actual project so we can test/tinker with the code?


#3

It didn’t work, how can I share all my code from visual studio core? Can I just past it here?


#4

Sure. To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

Also, do you have a link to the background image you are using? If not, I think you can use the insert image feature on a post.


#6

I’m actually using it with insert image, but the image is too big and I can’t move the text’s to other side.

That’s what I’m trying;


That’s what I have;

<div class="something">
  <img src="./images/collaboration.svg" width="35%;" float="rigth;">
<h1>npm Orgs is powerful collaboration - for free</h1>
<ul>
  <li>Encourage code discovery and re-use within teams</li>
  <li>Publish and control acces to your own namespace</li>
  <li>Manage public and private code with the same workflow</li>
</ul>
<a href="#">Sign up for Orgs</a> 
<br> or, <a href="#">Learn more about Orgs</a>
</div>

#7
.something {
    text-align: center;
    color: black;
    padding-bottom: 100px;
    
    background-color: rgb(49, 68, 88);
    
}

#8

You are going to need to give me all the css, because with what little you gave me, I can not validate my idea will work with your full css.


#9

that’s actually all the css for this part of code, I mean the pictures I post it. If you need the all code I can do that


#10

try it this way:

<div class="something">
    <img src="./images/collaboration.svg" width="35%;" float="rigth;">
    <div class="info">
        <h1>npm Orgs is powerful collaboration - for free</h1>
        <ul>
            <li>Encourage code discovery and re-use within teams</li>
            <li>Publish and control acces to your own namespace</li>
            <li>Manage public and private code with the same workflow</li>
        </ul>
        <a href="#">Sign up for Orgs</a> 
        <br> or, <a href="#">Learn more about Orgs</a>
    </div>
</div>

<style>
.something {
    display: flex;
    background-color: rgb(49, 68, 88);
}
</style>

#11

Ok, to get you started you need to change your img element from:

<img src="./images/collaboration.svg" width="35%;" float="rigth;">

to:

<img src="./images/collaboration.svg" style="35%; float:left;">

#12

that didn’t actually changed but @sorinr “display: flex;”
did this;


so I’m in the right track I guess now:D


#13

add in style:

.info {
display: flex;
flex-direction: column;
}

thats why i have wrapped the info stuff under a div that can be styled himself as you wish.


#14

and on mobile to have the svg above info just add a media query like:

@media (max-width: 576px) {
.something {
  flex-direction: column;
}
}

and thats it.


#16

do you have any idea how can I fix the button?.


#17

I need to see the css for <a href="#">Learn more about Orgs</a>


#18
#turuncu {
    background-color:red;
    border-radius: 30px;


}
.gemi {
    color: white;
}

#kenar {
    color: white;
}

#19
div class="something">
    <img src="./images/collaboration.svg" width="35%;">
  <div class="gemi">
    <h1>npm Orgs is powerful collaboration - for free</h1>
    <ul>
      <li>Encourage code discovery and re-use within teams</li><br>
      <li>Publish and control acces to your own namespace</li><br>
      <li>Manage public and private code with the same workflow</li>
    </ul>
  </div>

<button id="turuncu">Sign up for Orgs</button>
<div id="kenar"><br> or, Learn more about Orgs</div>

</div>

I actually changed the and put the button with divs


#20

I think its because you have

outside <div class="gemi">. try to move them right after </ul>


#21

div class="something">
    <img src="./images/collaboration.svg" width="35%;">
  <div class="gemi">
    <h1>npm Orgs is powerful collaboration - for free</h1>
    <ul>
      <li>Encourage code discovery and re-use within teams</li><br>
      <li>Publish and control acces to your own namespace</li><br>
      <li>Manage public and private code with the same workflow</li>
    </ul>
  </div>
</div>
<button id="turuncu">Sign up for Orgs</button>
<div id="kenar"><br> or, Learn more about Orgs</div>